/* LeoWegner — design tokens.
 *
 * Source of truth for the web design system. Matches the "App onboarding (Remix)"
 * Claude Design remix (editorial gold palette, Newsreader + Geist typography).
 *
 * Every page loads this file. Components.css builds on top with the component
 * primitives (buttons, tags, cards, sections, progress, etc.).
 *
 * Backwards-compat: old variable names (--amber, --paper, --ink-blue, etc.) are
 * retained as aliases so the per-page CSS files (shell.css, home.css, course.css,
 * quiz.css, …) keep rendering while migration off them happens gradually.
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------- PALETTE */
:root {
    /* Editorial-gold palette — neutral ramp (shared across themes). */
    --ink:          #1A1612;
    --ink-2:        #3A332B;
    --ink-3:        #25221D;      /* legacy alias kept */
    --paper:        #FAF7F2;      /* warm off-white (was #FFFFFF) */
    --paper-2:      #F3EEE4;
    --paper-3:      #E9E2D3;
    --text-paper:   #1A1612;
    --text-ink:     #F5EFE3;      /* text on dark surfaces */
    /* WCAG AA contrast: muted text needs 4.5:1 on every background it lands
     * on (paper, paper-2, surface). #5F574B = 6.15:1 on paper-2, 6.66:1 on
     * paper, 6.89:1 on surface. Was #7A7063 — failed at 4.20:1 on paper-2. */
    --muted-paper:  #5F574B;
    --muted-ink:    #9A8F80;

    /* Brand accents */
    --gold:         #B8863D;      /* primary */
    --gold-deep:    #8B6323;
    --gold-soft:    #E8D6B0;
    --gold-wash:    #F5EDD9;
    --sage:         #6A7A55;      /* secondary */
    --terracotta:   #B35A3E;      /* tertiary, sparingly */
    --ok:           #4B7A4D;
    --err:          #A33E3A;

    /* Back-compat aliases — do not remove; existing per-page CSS references them. */
    --amber:        var(--gold);
    --amber-2:      var(--gold-deep);
    --amber-soft:   var(--gold-soft);
    --ink-blue:     #2D4A6B;
    --success:      var(--ok);
    --danger:       var(--err);
    --spine:        var(--terracotta);  /* course spine colour — override per course */

    /* Radii */
    --radius-sm:    8px;
    --radius-md:    14px;
    --radius-lg:    22px;
    --radius-xl:    28px;
    /* Legacy alias — old tokens had --radius-md at 8px, keep that meaning too. */
    --radius:       var(--radius-md);

    /* Typography */
    --font-serif:   "Newsreader", "Iowan Old Style", Georgia, serif;
    --font-sans:    "Geist", -apple-system, "SF Pro Text", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* ------------------------------------------------------------ LIGHT MODE */
[data-theme="light"] {
    --bg:           var(--paper);
    --bg-2:         var(--paper-2);
    --bg-3:         var(--paper-3);
    --surface:      #FFFFFF;
    --surface-2:    #FBF8F2;
    --text:         var(--text-paper);
    --muted:        var(--muted-paper);
    --muted-2:      #9A8F80;
    --rule:         rgba(26, 22, 18, 0.08);
    --rule-2:       rgba(26, 22, 18, 0.14);
    --link:         var(--gold-deep);
    --shelf-wood:   var(--paper-3);
    --shelf-edge:   rgba(184, 134, 61, 0.30);
}

/* ------------------------------------------------------------- DARK MODE */
[data-theme="dark"] {
    --bg:           #13110E;
    --bg-2:         #1A1713;
    --bg-3:         #231F19;
    --surface:      #1C1814;
    --surface-2:    #221D17;
    --text:         var(--text-ink);
    --muted:        var(--muted-ink);
    --muted-2:      #6B6258;
    --rule:         rgba(245, 239, 227, 0.08);
    --rule-2:       rgba(245, 239, 227, 0.14);
    --link:         #D9A557;
    --shelf-wood:   #25221D;
    --shelf-edge:   rgba(217, 165, 87, 0.22);

    /* Gold shifts warmer in dark mode for legibility against ink surfaces. */
    --gold:         #D9A557;
    --gold-deep:    #B8863D;
    --gold-soft:    #4A3A1E;
    --gold-wash:    #2A2015;
    --sage:         #96A57F;
    --terracotta:   #D37A5A;
    --ok:           #86B58A;
    --err:          #D37A72;
}

/* --------------------------------------------------------- BASE ELEMENTS */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
    transition: background .25s ease, color .25s ease;
}

button { font-family: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
a:focus-visible      { outline: 2px solid var(--gold); outline-offset: 2px; }