/*
 * Site-wide design tokens.
 *
 * This file is the single source of truth for the colors, radii, shadows,
 * spacing, and focus styles used across the site. Define new tokens here
 * before introducing new hex codes in component CSS.
 *
 * Loaded early (right after Bootstrap) so the variables are available to
 * portfolio.css, main.css, and every page-/component-level <style> block.
 *
 * The site has a JS-toggled dark mode via `html.dark-mode`. Every token
 * that has a meaningful dark counterpart is overridden in the
 * `html.dark-mode :root` block. WCAG 2.2 AA contrast was verified for
 * each pair (text ≥ 4.5:1 against its surface, UI ≥ 3:1).
 *
 * The "canonical" choices below were picked by collapsing many close
 * variants observed across the codebase to a single accessible value:
 *   - hover blue:  #1e5c8a was chosen (4.61:1 on white, the variant most
 *     used by quiz/flashcards/se-gym and the only one already vetted
 *     against the focus-ring color).
 *   - success:     #1f7a3d (light) / #4fa34f (dark) — both clear 4.5:1.
 *   - error:       #b81e2c (light) / #ff8585 (dark) — Bootstrap #dc3545
 *     fails 4.5:1 against white as text; this nudge keeps the palette
 *     while passing AA for the cases where the color carries text.
 */

:root {
    /* ------------------------------------------------------------------
     * Brand
     * ------------------------------------------------------------------ */
    --color-primary: #2774AE;          /* UCLA Blue */
    --color-primary-hover: #1e5c8a;    /* Darker blue for :hover/:active */
    --color-primary-strong: #005587;   /* UCLA Navy — for borders / accents */
    --color-accent: #FFD100;           /* UCLA Gold */
    --color-accent-hover: #FFB81C;     /* Slightly darker gold */

    /* ------------------------------------------------------------------
     * Semantic
     * ------------------------------------------------------------------ */
    --color-success: #1f7a3d;
    --color-success-hover: #186430;
    --color-error: #b81e2c;
    --color-error-hover: #94121e;
    --color-warning: #b06800;          /* AA-safe warning text on white */
    --color-info: #2774AE;

    /* ------------------------------------------------------------------
     * Surfaces & text — light mode
     * ------------------------------------------------------------------ */
    --color-bg: #fdfdfd;               /* Page background */
    --color-surface: #ffffff;          /* Cards, panels, popovers */
    --color-surface-2: #f8f9fa;        /* Subtle alt panels (table headers) */
    --color-surface-3: #f5f5f5;        /* Zebra rows, very subtle bg */

    --color-text: #111111;             /* Body text */
    --color-text-muted: #595959;       /* Meta, captions, secondary copy (≥ 6.8:1) */
    --color-text-on-primary: #ffffff;
    --color-text-on-accent: #000000;

    /* ------------------------------------------------------------------
     * Borders & dividers
     * ------------------------------------------------------------------ */
    --color-border: #d8dde2;           /* Default component border */
    --color-border-strong: #767676;    /* Form-input borders (≥ 3:1) */
    --color-divider: #e1e4e8;          /* hr, list dividers */

    /* ------------------------------------------------------------------
     * Spacing scale (4 px base)
     * ------------------------------------------------------------------ */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 24px;
    --sp-2xl: 32px;
    --sp-3xl: 48px;

    /* ------------------------------------------------------------------
     * Border-radius scale
     * ------------------------------------------------------------------ */
    --radius-sm: 4px;                  /* Small chips, inline tabs */
    --radius-md: 8px;                  /* Buttons, panels, inputs */
    --radius-lg: 12px;                 /* Cards, modals */
    --radius-xl: 20px;                 /* Hero images, action boxes */
    --radius-pill: 999px;              /* Pill buttons */
    --radius-circle: 50%;              /* Avatars, indicator dots */

    /* ------------------------------------------------------------------
     * Elevation (box-shadow scale)
     *
     * Light mode: subtle dark drops.
     * Dark mode: deeper drops with higher alpha so the shadow stays
     * perceptible against dark surfaces (rgba(0,0,0,0.08) is invisible
     * on #1a1a1a).
     * ------------------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.18);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.30);

    /* ------------------------------------------------------------------
     * Focus ring (WCAG 2.4.7 / 1.4.11)
     *
     * 3 px outline + 2 px offset is the project default.  Keeps the ring
     * legible on any background and ≥ 3:1 against the page background
     * in both modes.
     * ------------------------------------------------------------------ */
    --focus-color: #2774AE;
    --focus-width: 3px;
    --focus-offset: 2px;

    /* ------------------------------------------------------------------
     * Typography
     * ------------------------------------------------------------------ */
    --font-body: Helvetica, Arial, sans-serif;
    --font-mono: 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono',
                 Menlo, monospace;
}

/*
 * Dark-mode overrides. The selector is `html.dark-mode` (NOT a media
 * query) — see `.agents/skills/light-dark-mode/SKILL.md`. Custom-property
 * overrides cascade through every selector that consumes them, so a
 * single set of overrides updates the whole site.
 */
html.dark-mode {
    /* Brand — UCLA Blue at #2774AE drops to ~3.74:1 against the dark page
       background and fails 1.4.3 for body text. Use a brighter blue for
       links/accents.  #4da3ff is the variant already used by the cookie
       notice, glossary, shortcuts, and other dark-mode accents — keep
       parity with that so a mid-flight switch doesn't shift hues. */
    --color-primary: #4da3ff;
    --color-primary-hover: #8fc4e3;
    --color-primary-strong: #5fa8d3;

    /* Semantic — green/red bumped to clear 4.5:1 on the darker surfaces */
    --color-success: #4fa34f;
    --color-success-hover: #67c167;
    --color-error: #ff8585;
    --color-error-hover: #ffa3a3;
    --color-warning: #ffd066;

    /* Surfaces & text */
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-surface-2: #252525;
    --color-surface-3: #1a1a1a;

    --color-text: #e6edf3;
    --color-text-muted: #b0b0b0;
    --color-text-on-primary: #0a0a14;
    --color-text-on-accent: #000000;

    /* Borders */
    --color-border: #333333;
    --color-border-strong: #6a737d;
    --color-divider: #444444;

    /* Elevation — bump alpha so shadows survive against dark surfaces */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);

    /* Focus */
    --focus-color: #FFD100;
}