/* ==========================================================================
   tokens.css — canonical design tokens (single source of truth)
   Direction: "Atlas" (§13.4-A) — warm neutrals + map-teal accent.
   Display face: Space Grotesk (§13.3). Mono: system stack.

   Load this BEFORE any page stylesheet. Dark is the default theme;
   [data-theme="light"] overrides. Page stylesheets must consume these
   variables and must not re-declare their own palette.

   Name mapping (spec §23 name -> legacy alias consumed by existing CSS):
     bg             -> --bg-primary
     surface-low    -> --bg-secondary
     surface        -> --bg-card
     surface-raised -> --bg-tertiary
     border-default -> --border-primary
     border-strong  -> --border-hover
     text-1/2/3     -> --text-primary / --text-secondary / --text-tertiary

   All text/surface pairs validated >= 4.5:1 WCAG AA in both themes
   (see scratchpad contrast script; plan §13.4 requirement).
   ========================================================================== */

:root {
    /* ---- Color: canonical surfaces & text (dark default) ---- */
    --bg: #0B0C0E;              /* warm ink */
    --surface-low: #101113;
    --surface: #15171A;         /* cards */
    --surface-raised: #1C1E22;  /* hovers, inputs, modals */
    --border-default: #26282C;
    --border-strong: #3A3D43;
    --text-1: #F2F1EE;
    --text-2: #ADABA4;
    --text-3: #8F8D85;

    /* ---- Primary accent: map-teal (ties person-brand to MapMiles) ---- */
    --accent: #2D8C85;          /* identity hue: borders, icons, tints */
    --accent-strong: #1F7A73;   /* fills that carry white text (5.1:1) */
    --accent-strong-hover: #17635D;
    --accent-text: #5FC2B8;     /* teal used AS text on dark surfaces */

    /* ---- Status / category accents (semantic mapping preserved) ---- */
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-green: #10b981;    /* live */
    --accent-orange: #D9A23B;   /* building (warmed amber, §13.4) */
    --accent-purple: #8b5cf6;   /* research */
    --accent-red: #ef4444;      /* security */
    --purdue-gold: #cfb997;     /* education only */
    --status-building: var(--accent-orange);
    --status-live: var(--accent-green);
    --status-research: var(--accent-purple);
    --status-security: var(--accent-red);
    --brand-purdue: var(--purdue-gold);

    /* ---- Legacy aliases (existing stylesheets consume these) ---- */
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface-low);
    --bg-card: var(--surface);
    --bg-tertiary: var(--surface-raised);
    --border-primary: var(--border-default);
    --border-hover: var(--border-strong);
    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);

    /* ---- Translucent nav surfaces (theme-specific) ---- */
    --nav-bg: rgba(11, 12, 14, 0.8);
    --nav-bg-scrolled: rgba(11, 12, 14, 0.95);

    /* ---- Typography ---- */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;

    /* ---- Radius scale (§23: 8 / 12 / 16 / 24) ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ---- Shadows: two levels (§23) ---- */
    --shadow-rest: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
    --shadow-raised: 0 10px 15px -3px rgba(0, 0, 0, 0.10);
    /* legacy aliases */
    --shadow-small: var(--shadow-rest);
    --shadow-medium: var(--shadow-rest);
    --shadow-large: var(--shadow-raised);

    /* ---- Spacing scale (consume in later phases; §23) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* ---- Container widths (§23) ---- */
    --container-grid: 1200px;
    --container-cards: 1080px;
    --container-prose: 720px;

    /* ---- Motion (§23) ---- */
    --dur-fast: 150ms;
    --dur-med: 250ms;
    --dur-page: 400ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Breakpoints (reference only — media queries cannot consume vars):
       480 / 640 / 768 / 1024 / 1400 */
}

[data-theme="light"] {
    --bg: #FAF9F7;              /* paper */
    --surface-low: #F0EEE9;
    --surface: #FFFFFF;
    --surface-raised: #E7E4DE;
    --border-default: #E5E2DC;
    --border-strong: #C9C5BC;
    --text-1: #1C1B18;
    --text-2: #54524C;
    --text-3: #5F5D57;          /* fixes old #737373 (4.35:1 -> 6.3:1) */
    --accent-text: #1D6B64;     /* teal as text on light */
    --nav-bg: rgba(250, 249, 247, 0.85);
    --nav-bg-scrolled: rgba(250, 249, 247, 0.95);
    --shadow-rest: 0 1px 3px 0 rgba(28, 27, 24, 0.08);
    --shadow-raised: 0 10px 15px -3px rgba(28, 27, 24, 0.10);
}

/* ---- Focus ring (§23): 2px accent outline, :focus-visible only ---- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}