:root {
    /* Core palette — drawn from the Stratford seal (navy globe, green laurel,
       black ink), flat solid colors, no gradients. */
    --clr-navy:        #0b1f33;
    --clr-navy-dk:     #071624;
    --clr-navy-soft:   #16324d;
    --clr-green:       #2f8f4e;
    --clr-green-dk:    #256b3c;
    --clr-green-soft:  rgba(47, 143, 78, 0.1);
    --clr-ink:         #14161a;
    --clr-ink-soft:    #4b5563;
    --clr-paper:       #f7f8f4;
    --clr-paper-alt:   #ffffff;
    --clr-line:        #dde1d7;
    --clr-error:       #b3261e;
    --clr-success:     #2f8f4e;

    /* Aliases so existing rules that reference the old token names still
       resolve to the new palette. */
    --clr-primary:      var(--clr-navy);
    --clr-primary-dk:   var(--clr-navy-dk);
    --clr-accent:       var(--clr-green);
    --clr-text:         var(--clr-ink);
    --clr-text-muted:   rgba(20, 22, 26, 0.62);
    --clr-link:         var(--clr-green-dk);
    --clr-link-hover:   var(--clr-navy);
    --clr-surface:      rgba(11, 31, 51, 0.04);
    --clr-border-subtle: var(--clr-line);

    /* Heading text drawn on paper surfaces — adapts with the theme.
       On-navy text stays fixed since navy card backgrounds never flip. */
    --clr-heading:      var(--clr-navy);
    --clr-on-navy:      #f7f8f4;

    /* Flat surfaces — replaces the old glassmorphism tokens. Kept under the
       same names so existing .glass-* rules still work without blur. */
    --glass-bg:       #ffffff;
    --glass-border:   var(--clr-line);
    --glass-blur:     0px;
    --glass-card:     #ffffff;
    --glass-overlay:  rgba(11, 31, 51, 0.03);
    --glass-nav:      #ffffff;

    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  12px;

    --shadow-xs:  0 1px 2px rgba(11, 17, 24, 0.05);
    --shadow-sm:  0 1px 3px rgba(11, 17, 24, 0.07);
    --shadow-md:  0 2px 10px rgba(11, 17, 24, 0.08);
    --shadow-lg:  0 10px 28px rgba(11, 17, 24, 0.12);
    --shadow-btn: 0 1px 2px rgba(11, 17, 24, 0.12);
    --shadow-btn-hover: 0 4px 10px rgba(11, 17, 24, 0.16);
    --shadow-glow: none;
    --shadow-card-hover: 0 12px 28px rgba(11, 17, 24, 0.12);

    --font-stack: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --lh-tight:  1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --ls-tight:  -0.01em;
    --ls-normal:  0;
    --ls-wide:    0.04em;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;

    --header-offset: 80px;
}

/* Dark theme — explicit choice via Settings, or "Auto" following the OS. */
:root[data-theme="dark"] {
    --clr-paper:        #12161c;
    --clr-paper-alt:    #1a1f27;
    --clr-ink:          #e8eaed;
    --clr-ink-soft:     #a0a8b4;
    --clr-line:         #2a3038;
    --clr-text:         var(--clr-ink);
    --clr-text-muted:   rgba(232, 234, 237, 0.62);
    --clr-surface:      rgba(255, 255, 255, 0.05);
    --clr-border-subtle: var(--clr-line);
    --clr-heading:      var(--clr-ink);

    --glass-bg:       #1a1f27;
    --glass-border:   var(--clr-line);
    --glass-card:     #1a1f27;
    --glass-overlay:  rgba(255, 255, 255, 0.04);
    --glass-nav:      #1a1f27;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --clr-paper:        #12161c;
        --clr-paper-alt:    #1a1f27;
        --clr-ink:          #e8eaed;
        --clr-ink-soft:     #a0a8b4;
        --clr-line:         #2a3038;
        --clr-text:         var(--clr-ink);
        --clr-text-muted:   rgba(232, 234, 237, 0.62);
        --clr-surface:      rgba(255, 255, 255, 0.05);
        --clr-border-subtle: var(--clr-line);
        --clr-heading:      var(--clr-ink);

        --glass-bg:       #1a1f27;
        --glass-border:   var(--clr-line);
        --glass-card:     #1a1f27;
        --glass-overlay:  rgba(255, 255, 255, 0.04);
        --glass-nav:      #1a1f27;
    }
}