/* ============================================================================
   tokens.css — the design-system token layer (Sprint 0)
   Source of truth: docs/website_redesign.md §3-§4.

   Warm, editorial identity: cream / clay / espresso, square corners, no shadows.
   Every page extends base.html, which links this file once in <head> before its
   own inline <style>. Components reference var(--token); never hardcode hex or
   font families. Dark mode re-maps the same token names to warm charcoal-brown.
   ============================================================================ */

:root {
    /* --- Light surfaces --- */
    --paper:           #F2ECE0;  /* primary page bg (warm cream) */
    --surface:         #F8F4EB;  /* cards, panels, nav, inputs */
    --band-soft:       #F5F0E6;  /* soft tonal step BETWEEN --surface and --paper (homepage comparison band) */
    --band:            #E5DCCB;  /* deeper tonal section (alternating bands) */
    --ink:             #2A241C;  /* primary text, headings */
    --body:            #6B6052;  /* body copy (warm gray) */
    --muted:           #9A8F7E;  /* captions, hints, meta */
    --hairline:        #E6DDCC;  /* default 1px borders */
    --hairline-strong: #DBD0BD;  /* emphasis / input borders */
    --hairline-band:   #D6CCB8;  /* borders on --band sections */

    /* --- Dark (espresso) surfaces — also the light-mode dark tiles/footer --- */
    --espresso:      #281E16;  /* primary dark surface (feature panels, footer) */
    --espresso-deep: #221A12;  /* figure tiles (darker, for contrast) */
    --dark-divider:  #4A3F2E;  /* hairlines on dark */
    --dark-ink:      #E4D7C0;  /* primary text on dark */
    --dark-body:     #D6CBB6;  /* secondary text on dark — bright enough to scale with the dark surfaces */
    --dark-muted:    #AC9C82;  /* muted/meta on dark — brighter for legibility */
    --dark-eyebrow:  #C8A276;  /* eyebrow labels on dark (warm tan, a touch brighter) */

    /* --- Accents (sparingly) --- */
    --clay:      #9E4F28;  /* primary accent on light: links, markers, active (deep burnt-sienna; clears AA on cream/surface) */
    --clay-dark: #C77C45;  /* accent on dark surfaces (brighter) */
    --gold:      #E8B878;  /* small highlight points on figures (rare) */
    --sage:      #8A977E;  /* secondary accent on light (category tags) */
    --sage-dark: #9DA589;  /* secondary accent on dark */

    /* --- Semantic — quiz feedback (always pair color with a glyph/text) --- */
    --correct-border: #5E7A52;  --correct-bg: #ECF1E4;  --correct-text: #3C5230;
    --wrong-border:   #B4623B;  --wrong-bg:   #F6E7DD;  --wrong-text:   #8A3E1C;

    /* --- Danger (destructive actions: delete / reject) ---
       A warm brick red, redder and deeper than --clay so the two read as
       distinct actions. Always paired with a text label ("Delete"/"Reject"),
       never color alone — the palette stays colorblind-safe. --danger-soft pairs
       are the badge/alert tints (e.g. a "Rejected" status chip). */
    --danger:       #A6402B;  /* destructive button fill */
    --danger-hover: #87301F;  /* destructive button hover */
    --danger-soft-bg:   #F6E2DC;  /* danger badge / alert background */
    --danger-soft-text: #8A2E1C;  /* danger badge / alert text */

    /* --- Type & shape --- */
    /* Single source of truth for the typefaces. To upgrade the serif to a
       licensed face (GT Sectra / Tiempos / Canela), change ONLY this --serif
       line and the font load in base.html — the whole site follows. Never
       hardcode the family name in a component. Georgia leads the serif fallback
       so a real serif (never Times) shows while Newsreader loads. */
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif;

    --radius: 0;                               /* everywhere */
    --hair:        1px solid var(--hairline);
    --hair-strong: 1px solid var(--hairline-strong);
}

/* --- Dark mode: warm charcoal-brown, not pure black. Re-maps the same names.
   Stepped browns give the same tonal rhythm light mode has — a raised card/hero
   surface that pops off the page, a mid page, a darker lessons band, and the
   figure tiles/footer as the darkest anchors (lightest -> darkest):
     surface(cards/hero) > paper(page/quiz) > band(lessons) > espresso-deep(tiles) > espresso(footer)
   --- */
html.dark-mode {
    --surface:         #332819;  /* cards + hero band — raised, reads as a discrete panel */
    --band-soft:       #2A2014;  /* soft step between --surface and --paper (homepage comparison band) */
    --paper:           #221810;  /* page bg + quiz band (mid) */
    --band:            #181109;   /* lessons band (a hair darker) */
    --espresso-deep:   #140E08;  /* figure tiles — darkest matte so images/figures pop */
    --espresso:        #100A05;  /* footer — darkest anchor */
    --ink:             var(--dark-ink);
    --body:            var(--dark-body);
    --muted:           var(--dark-muted);
    --hairline:        #3F3528;
    --hairline-strong: #57492F;  /* card/input borders — stronger so panels read as discrete */
    --hairline-band:   #4A3F2E;
    --clay:            #D2884B;   /* links/markers — a shade brighter than --clay-dark for life on dark */
    --sage:            var(--sage-dark);

    /* Quiz feedback on dark: warm, recessed dark fills with light text + a
       colored left bar — instead of the bright light chips, which glare on the
       espresso page. Still colorblind-safe (always paired with ✓/✗ + text). */
    --correct-border: #6E8A5E;
    --correct-bg:     #232B1B;
    --correct-text:   #B7CF9F;
    --wrong-border:   #C77C45;
    --wrong-bg:       #2E1D12;
    --wrong-text:     #E3A77E;

    /* Danger on dark: brighter brick so it lives against the espresso page. */
    --danger:           #C9603F;
    --danger-hover:     #A6402B;
    --danger-soft-bg:   #2E1812;
    --danger-soft-text: #E8A488;
}

/* ============================================================================
   Design invariants (non-negotiable, §1 hard-don't list)
   Square corners and no shadows EVERYWHERE. !important because these are global
   invariants, not component choices — they override page CSS and inline styles
   site-wide in a single rule, so each sprint never has to re-assert them.
   ============================================================================ */
*, *::before, *::after {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Base typography. Headings are serif/400; body inherits sans from base.html.
   These element rules carry no page-specific overrides, so base.html's later
   inline <style> doesn't clobber them. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.15;
}

a {
    color: var(--clay);
}

/* The one allowed "ring": a 2px clay focus outline on keyboard navigation. */
:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 2px;
}
