/*
    variables.css
    Single source of truth for design tokens (colors, spacing, radii,
    shadows, borders, transitions, typography scale). No other file
    should hard-code a color, spacing value, radius, or shadow — add
    or adjust a token here instead, so a change in one place updates
    the whole site consistently.

    Palette rationale: yellow / green / blue / pink, per project brief.
    Every text/background/focus-ring pairing actually used on the site
    was verified against WCAG AA (4.5:1 normal text, 3:1 large text and
    UI components) during development. See contrast_check.py (dev-only
    tool, not shipped with the site) for the verification method.

    [data-theme="default"] scopes today's values so additional themes
    could be added later (see js/modules/theme.js) without restructuring
    this file.
*/

:root,
[data-theme='default'] {
    /* ---- Color: blue ---- */
    --color-blue-900: #0b2a6b;
    --color-blue-700: #1550c9;
    --color-blue-600: #1a5fe0;

    /* ---- Color: green ---- */
    --color-green-600: #1e8e4a;
    --color-green-800: #156b38;
    --color-green-900: #124f29;

    /* ---- Color: yellow ---- */
    --color-yellow-500: #f5b400;
    --color-yellow-700: #d99a00;
    --color-yellow-900: #a86e00;

    /* ---- Color: pink ---- */
    --color-pink-600: #d6336c;
    --color-pink-800: #a82656;
    --color-pink-900: #7a1c3f;

    /* ---- Color: neutrals ---- */
    --color-neutral-900: #1a1d23;
    --color-neutral-700: #4a4f58;
    --color-neutral-200: #d8dbe2;
    --color-neutral-100: #f4f5f7;
    --color-white: #ffffff;

    /* RGB triplet (not a color on its own) so alpha-blended uses of
       blue-900, e.g. the media-placeholder caption backdrop, stay in
       sync with the solid token instead of duplicating its RGB value. */
    --color-blue-900-rgb: 11, 42, 107;

    /* ---- Semantic color roles ---- */
    --color-bg-page: var(--color-neutral-100);
    --color-bg-surface: var(--color-white);
    --color-bg-header: var(--color-blue-900);
    --color-text-body: var(--color-neutral-900);
    --color-text-muted: var(--color-neutral-700);
    --color-text-on-dark: var(--color-white);
    --color-border-default: var(--color-neutral-200);
    --color-link: var(--color-blue-700);
    --color-focus-ring-light: var(--color-blue-700);
    --color-focus-ring-dark: var(--color-yellow-500);

    /* ---- Typography ----
       One system-font stack for the whole site (see css/typography.css
       header comment for the rationale). Sizes use clamp() for fluid
       scaling between the 320px and 1920px required test widths. */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
        Arial, sans-serif;
    --font-display: var(--font-body);
    --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    --fs-small: 0.875rem;
    --fs-h1: clamp(2.25rem, 1.9rem + 2vw, 3.75rem);
    --fs-h2: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --lh-heading: 1.15;
    --lh-body: 1.65;

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* ---- Radii ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Borders ---- */
    --border-width: 2px;
    --border-width-thick: 3px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 3px rgba(var(--color-blue-900-rgb), 0.12);
    --shadow-md: 0 6px 16px rgba(var(--color-blue-900-rgb), 0.14);
    --shadow-lg: 0 16px 32px rgba(var(--color-blue-900-rgb), 0.18);

    /* ---- Transitions ---- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* ---- Layout ---- */
    --container-max-width: 1200px;
    --container-padding-inline: var(--space-5);

    /* ---- Z-index scale ---- */
    --z-header: 100;
    --z-skip-link: 200;

    /*
        Breakpoint reference (documentation only — CSS custom properties
        cannot be used inside @media conditions). Actual values live in
        responsive.css. Listed here so there is one place to look up
        what the project treats as its scale:
        480px, 768px, 1024px, 1280px, 1440px, 1920px
    */
}