/* ============================================================================
   Brooks Warehouse — palette.css
   The ONLY file that holds colors + the League Spartan @font-face.
   Pages reference these custom properties; never hardcode a hex elsewhere.
   ============================================================================ */

@font-face {
    font-family: 'League Spartan';
    src: url('/fonts/league-spartan/LeagueSpartan-Variable.ttf') format('truetype-variations'),
         url('/fonts/league-spartan/LeagueSpartan-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
    size-adjust: 112%;
}

:root {
    /* --- Brand: green primary, blue accent --- */
    --primary-color: #54b948;
    --primary-hover: #008953;
    --primary-press: #398130;
    --on-primary: #ffffff;

    --accent-color: #00aeef;
    --accent-hover: #008fc4;
    --accent-press: #047ca8;
    --on-accent: #ffffff;

    --link-color: #008fc4;
    --link-hover-color: #047ca8;

    /* --- Surfaces (light / near-white only) --- */
    --background-color: #f5f6f7;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --surface-3: #f1f3f5;

    /* --- Lines & text --- */
    --hairline: #e6e8ea;
    --hairline-strong: #d4d8dc;
    --font-color: #2b2f33;
    --text-muted: #5b6b72;
    --text-faint: #97a6ae;

    /* --- Header chrome --- */
    --header-bg: var(--surface);
    --header-border: var(--hairline);
    --nav-fg: #5b6b72;
    --nav-fg-active: var(--primary-color);
    --nav-underline: var(--accent-color);

    /* --- Selection / wash --- */
    --brand-wash: #eaf6e8;          /* faint green wash */
    --accent-wash: #e3f5fd;         /* faint blue wash */
    --row-hover-bg: var(--surface-2);
    --row-selected-bg: #eaf6e8;

    /* --- Focus --- */
    --focus-ring-color: #00aeef;

    /* --- Semantic --- */
    --success-color: #2e9e3f;
    --success-bg: #e4f6e3;
    --success-fg: #1f6b2b;
    --warning-color: #c98a12;
    --warning-bg: #fdf1d6;
    --warning-fg: #8a5e0a;
    --danger-color: #d64545;
    --danger-bg: #fbe4e4;
    --danger-fg: #9c2a2a;
    --on-danger: #ffffff;

    /* Microsoft / dark sign-in button */
    --dark-btn-bg: #2f2f2f;
    --dark-btn-hover: #1a1a1a;
    --on-dark-btn: #ffffff;
    --info-color: #00aeef;
    --info-bg: #e3f5fd;
    --info-fg: #066a8c;

    /* --- Spacing scale (4px base) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;

    /* --- Radius --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* --- Elevation (flat) --- */
    --elev-1: none;
    --elev-2: 0 1px 2px rgba(43, 47, 51, 0.06);
    --elev-3: 0 12px 32px rgba(43, 47, 51, 0.18);

    /* --- Type scale --- */
    --fs-display: clamp(2.25rem, 4vw, 3.25rem);
    --fs-h1: 2rem;
    --fs-h2: 1.6rem;
    --fs-h3: 1.3rem;
    --fs-h4: 1.1rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.75rem;

    /* --- Tracking --- */
    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-wide: 0.04em;
    --ls-wider: 0.08em;

    /* --- Z-index --- */
    --z-sticky: 100;
    --z-header: 200;
    --z-dropdown: 300;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* --- Font --- */
    --font-family-base: 'League Spartan', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
}