/* Bytes Of Jord design tokens: Powder blue and navy (UI/UX spec, chosen Oct 12, 2026).
   The theme follows the system unless data-theme on <html> overrides it. */

:root {
    --bg: #F5F8FC;
    --surface: #FFFFFF;
    --sunken: #E8F0FA;
    --border: #D3DFEE;
    --text: #0F1B33;
    --muted: #4F5D78;
    --accent: #1E3A8A;
    --on-accent: #FFFFFF;
    --accent-soft: #DCE8FA;
    --herb: #2F6B4F;
    --warn: #A15C07;
    --danger: #B42318;
    --ph1: #D8E6F8;
    --ph2: #E6E0F6;
    --ph3: #DDF0EA;
    --ph4: #F5E3E8;
    --ph-ink: #3E4C66;
    --scrim: rgba(15, 27, 51, .45);
    --band: color-mix(in srgb, var(--accent) 34%, #070A12);
    --band-text: #F2F5FB;
    --band-muted: #AEB8CC;

    --sh-sm: 0 1px 2px rgba(15, 27, 51, .06);
    --sh-md: 0 1px 2px rgba(15, 27, 51, .05), 0 8px 24px -10px rgba(15, 27, 51, .16);
    --sh-lg: 0 1px 2px rgba(15, 27, 51, .04), 0 16px 40px -12px rgba(15, 27, 51, .18), 0 40px 80px -32px rgba(15, 27, 51, .22);

    --font-display: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-text: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --motion-quick: 120ms ease-out;
    --motion-base: 220ms cubic-bezier(0.2, 0, 0, 1);
    --motion-page: 350ms cubic-bezier(0.2, 0, 0, 1);
    --motion-hero: 450ms cubic-bezier(0.3, 0, 0, 1);
    --stagger: 40ms;

    --radius-input: 10px;
    --radius-button: 12px;
    --radius-card: 20px;
    --radius-photo: 24px;
    --container: 1280px;
    --gutter: 24px;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #0C1222;
    --surface: #131B2F;
    --sunken: #080D18;
    --border: #253150;
    --text: #EEF2FA;
    --muted: #A3B0CB;
    --accent: #93B4F5;
    --on-accent: #0C1222;
    --accent-soft: #1B2A4D;
    --herb: #6FBF95;
    --warn: #F5B94A;
    --danger: #F97066;
    --ph1: #1A2744;
    --ph2: #262342;
    --ph3: #183330;
    --ph4: #33222B;
    --ph-ink: #B9C6E0;
    --scrim: rgba(0, 0, 0, .6);
    --band: color-mix(in srgb, var(--accent) 16%, #05070C);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -10px rgba(0, 0, 0, .6);
    --sh-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 48px -12px rgba(0, 0, 0, .6), 0 40px 90px -30px rgba(0, 0, 0, .7);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0C1222;
        --surface: #131B2F;
        --sunken: #080D18;
        --border: #253150;
        --text: #EEF2FA;
        --muted: #A3B0CB;
        --accent: #93B4F5;
        --on-accent: #0C1222;
        --accent-soft: #1B2A4D;
        --herb: #6FBF95;
        --warn: #F5B94A;
        --danger: #F97066;
        --ph1: #1A2744;
        --ph2: #262342;
        --ph3: #183330;
        --ph4: #33222B;
        --ph-ink: #B9C6E0;
        --scrim: rgba(0, 0, 0, .6);
        --band: color-mix(in srgb, var(--accent) 16%, #05070C);
        --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --sh-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -10px rgba(0, 0, 0, .6);
        --sh-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 48px -12px rgba(0, 0, 0, .6), 0 40px 90px -30px rgba(0, 0, 0, .7);
        color-scheme: dark;
    }
}