/*
  Design tokens — the single source for every color, type, spacing and motion
  value in the site. Nothing outside this file should contain a hard-coded
  hex value or a magic pixel number. See PHASE-2-DESIGN.md for rationale.
*/

:root {
    /* === Color — light theme (default) === */
    --paper:   #F6F4EE;
    --surface: #FFFFFF;
    --ink:     #15171B;
    --muted:   #5A5E64;
    --rule:    #918869;
    --signal:  #B8720A;
    --signal-ink: #15171B; /* text color used on top of a --signal background */
    --link:    #8A5708; /* darker amber for body-sized link/label text — --signal alone is only 3.5:1 on paper, enough for large text and borders but not small text (see PHASE-2-DESIGN.md accessibility notes) */

    /* === Typography === */
    --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    --text-xs:  clamp(0.75rem,  0.72rem + 0.15vw, 0.8rem);
    --text-sm:  clamp(0.875rem, 0.84rem + 0.2vw,  0.95rem);
    --text-base:clamp(1rem,     0.96rem + 0.25vw, 1.1rem);
    --text-md:  clamp(1.2rem,   1.1rem + 0.5vw,   1.32rem);
    --text-lg:  clamp(1.44rem,  1.3rem + 0.8vw,   1.6rem);
    --text-xl:  clamp(1.73rem,  1.5rem + 1.3vw,   2.1rem);
    --text-2xl: clamp(2.07rem,  1.7rem + 2vw,     2.7rem);
    --text-3xl: clamp(2.49rem,  1.9rem + 3vw,     3.6rem);

    --leading-tight: 1.1;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* === Spacing (4px base) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* === Layout === */
    --content-max: 1200px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --border-width: 1px;

    /* === Motion === */
    --duration-fast: 150ms;
    --duration-base: 350ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* === Elevation (hairlines, not shadows — see Phase 2 self-critique) === */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 45%, transparent);
}

:root[data-theme='dark'] {
    --paper:   #14171B;
    --surface: #1C2027;
    --ink:     #EDEBE4;
    --muted:   #9A9EA6;
    --rule:    #626A78;
    --signal:  #F2A93C;
    --signal-ink: #14171B;
    --link:    #F2A93C; /* already 9:1 on dark paper, no separate darkening needed */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --paper:   #14171B;
        --surface: #1C2027;
        --ink:     #EDEBE4;
        --muted:   #9A9EA6;
        --rule:    #626A78;
        --signal:  #F2A93C;
        --signal-ink: #14171B;
        --link:    #F2A93C;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
    }
}