/*
 * Global styles
 *
 * This file covers only foundation concerns and shared button primitives:
 * - Design tokens live in styles/tokens.css
 * - Semantic theme variables live in styles/theme.css
 * - Base HTML/body defaults live in styles/base.css
 *
 * Page and component-local styles now live in .razor.css isolation files
 * alongside their paired Razor components (Sprint 3, Packet E):
 * - MainLayout.razor.css  – layout shell, auth bar, nav link
 * - Home.razor.css         – public landing page
 * - OnboardingCard.razor.css – onboarding card overlay
 * - AppHome.razor.css      – authenticated app home shell
 * - Authentication.razor.css – auth error panel
 *
 * Future Sprint 4 UI work should prefer .razor.css isolation for any
 * new page or component-local styling. Only add rules here when a style
 * is genuinely shared across multiple unrelated components.
 */

/* ── Shared button primitives ─────────────────────────────────── */

/* Used by MainLayout and Authentication */
.auth-button {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.auth-button:hover {
    background: var(--color-primary-hover);
}

/* Used by Home (landing page) and OnboardingCard */
.lp-btn-primary {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    line-height: var(--line-height-snug);
}

.lp-btn-primary:hover {
    background: var(--color-primary-hover);
}

.lp-btn-light {
    background: var(--color-surface);
    color: var(--color-primary);
}

.lp-btn-light:hover {
    background: var(--color-primary-light);
}