/* ==========================================================================
   EG Design System – tokens
   Source of truth: the "EG Design System" artifact (tokens.json v1).
   Dark is the default theme; light is set with [data-theme="light"] on <html>.
   Every other stylesheet on the site reads these custom properties.
   ========================================================================== */

:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* Colour – surfaces */
    --bg: #07172a;
    --surface: #0b1f36;
    --raised: #102842;
    --sunken: #0b1f36;

    /* Colour – text and lines */
    --text: #eaf0f7;
    --text-muted: #9cafc4;
    --border: #1d3554;
    --border-strong: #5f7a99;

    /* Colour – roles */
    --action: #d4a650;
    --action-hover: #e2bf75;
    --on-action: #07172a;
    --link: #8fb6de;
    --accent: #d4a650;
    --focus: #d4a650;
    --selection: #2b4a6e;
    --disabled: #4f6580;

    /* Colour – status (always paired with a word or icon) */
    --success: #5cc28a;
    --warning: #e0a83e;
    --danger: #f07a6e;
    --info: #8fc1f0;

    /* RGB channels for translucent tints: rgba(var(--action-rgb), 0.2) */
    --bg-rgb: 7, 23, 42;
    --surface-rgb: 11, 31, 54;
    --text-rgb: 234, 240, 247;
    --action-rgb: 212, 166, 80;
    --link-rgb: 143, 182, 222;
    --accent-rgb: 212, 166, 80;

    /* Shadow – dark mode leans on `raised` first, shadow second */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
    color-scheme: light;

    --bg: #f9f8f3;
    --surface: #ffffff;
    --raised: #ffffff;
    --sunken: #f1efe6;

    --text: #0b1b2e;
    --text-muted: #566577;
    --border: #dcdad2;
    --border-strong: #7d8692;

    --action: #0a3358;
    --action-hover: #06223d;
    --on-action: #ffffff;
    --link: #0a3358;
    --accent: #8a6a1f;
    --focus: #0a3358;
    --selection: #f2e2bb;
    --disabled: #9aa2ab;

    --success: #23744a;
    --warning: #8a5a10;
    --danger: #b8352a;
    --info: #1d5f9e;

    --bg-rgb: 249, 248, 243;
    --surface-rgb: 255, 255, 255;
    --text-rgb: 11, 27, 46;
    --action-rgb: 10, 51, 88;
    --link-rgb: 10, 51, 88;
    --accent-rgb: 138, 106, 31;

    --shadow-sm: 0 1px 2px rgba(7, 23, 42, 0.08), 0 1px 3px rgba(7, 23, 42, 0.06);
    --shadow-md: 0 6px 18px rgba(7, 23, 42, 0.10);
    --shadow-lg: 0 16px 40px rgba(7, 23, 42, 0.16);
}

:root {
    /* Brand constants – for marks and artwork; use the role tokens in UI */
    --navy: #0a3358;
    --navy-deep: #06223d;
    --navy-sky: #8fb6de;
    --gold: #d4a650;
    --gold-soft: #e2bf75;
    --gold-deep: #8a6a1f;

    /* Charts – use in order, label each series directly */
    --data-1: #3d7cc9;
    --data-2: #b07d22;
    --data-3: #2f9b7b;
    --data-4: #d0644f;
    --data-5: #b8559c;

    /* Type – families */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Type – scale (base 17px, ratio 1.25) */
    --text-name: 51.88px;
    --text-h1: 41.5px;
    --text-h2: 33.2px;
    --text-lead: 26.56px;
    --text-h3: 21.25px;
    --text-body: 17px;
    --text-ui: 15px;
    --text-small: 13.6px;

    /* Spacing – 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* Radius – three steps plus round */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-round: 50%;

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    background-color: var(--bg);
}

::selection {
    background: var(--selection);
    color: var(--text);
}