/*
 * 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);
}

/* ── Access state pages (used by AccessPending, AccessDenied, AccessInviteRequired) ── */

.access-state-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-lg) var(--space-md);
    min-height: 60vh;
}

.access-state-card {
    max-width: 480px;
    width: 100%;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.access-state-title {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-lg);
}

.access-state-message {
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-muted);
}

.access-state-detail {
    margin: 0 0 var(--space-md) 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.access-state-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}