/* ══════════════════════════════════════════════════════════════════
   Xerion design tokens - the ONE place colours, radii, shadows, spacing
   and type are defined. Loaded before public.css (marketing shell) and
   app.css (application shell) so both share exactly the same values.
   Seasonal themes (seasons.css) re-tint --blue on top of these.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* Accent - used deliberately: primary actions, links, focus, current-nav */
    --blue:        #1a56db;
    --blue-dark:   #1344b8;
    --blue-faint:  #eef4ff;

    /* Ink and surfaces */
    --navy:        #0b1b33;
    --hero-bg:     #0a1428;
    --ink:         #101828;
    --ink-mid:     #475467;
    --ink-light:   #667085;
    --surface:     #f7f8fa;
    --card:        #ffffff;
    --border:      #e4e7ec;
    --border-strong: #cfd5df;

    /* Status */
    --green:       #16a34a;
    --green-faint: #eafaf0;
    --red:         #dc2626;
    --red-faint:   #fdecec;
    --amber:       #b45309;
    --amber-faint: #fff4e5;

    /* On-dark text (hero, CTA bands) */
    --on-dark:        #ffffff;
    --on-dark-mid:    #b6c4d9;
    --on-dark-light:  #92a5c0;
    --on-dark-accent: #7fa7ee;

    /* Shape */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-lg:   12px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
    --shadow-md: 0 4px 16px rgba(16,24,40,0.08);
    --shadow-lg: 0 12px 32px rgba(16,24,40,0.12);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Type */
    --font-body: 'DM Sans', Arial, sans-serif;
    --font-head: 'Outfit', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, monospace;
    --measure: 66ch;

    /* Layout */
    --container: 1120px;
    --header-h: 64px;

    /* Motion */
    --ease: 0.15s ease;

    /* Focus ring */
    --focus: 0 0 0 3px rgba(26,86,219,0.35);

    color-scheme: light;
}

[data-theme="dark"] {
    --blue:        #5b8def;
    --blue-dark:   #7ba3f2;
    --blue-faint:  rgba(91,141,239,0.16);
    --navy:        #0a1220;
    --hero-bg:     #070d1a;
    --ink:         #e8ecf3;
    --ink-mid:     #b0b8c8;
    --ink-light:   #8a94a6;
    --surface:     #12161f;
    --card:        #1a1f2a;
    --border:      #2a3140;
    --border-strong: #3a4356;
    --green:       #34d399;
    --green-faint: rgba(52,211,153,0.14);
    --red:         #f87171;
    --red-faint:   rgba(248,113,113,0.14);
    --amber:       #f0b559;
    --amber-faint: rgba(240,181,89,0.14);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
    --focus: 0 0 0 3px rgba(91,141,239,0.45);
    color-scheme: dark;
}

/* The logo is dark-on-transparent; invert it on dark surfaces. */
[data-theme="dark"] img[src*="logo.png"] { filter: brightness(0) invert(1); }