/* ─────────────────────────────────────────────────────────────
   Mündigkeit — Design Tokens v1.3
   Civic tech as luxury infrastructure.
   Drop-in for the production site; matches tokens.css 1:1.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Color · Brand · Navy ── */
  --navy-900: #0b1834;   /* ink · primary CTA · body text */
  --navy-800: #14213d;   /* brand wordmark · headings */
  --navy-700: #1c2c4f;   /* exam-zone border · strong meta */
  --navy-600: #2a3a64;   /* secondary heading */
  --navy-500: #3d4e7a;   /* meta · subtle copy */
  --navy-300: #8893b3;   /* tech-credit · placeholder */
  --navy-200: #c4ccdf;   /* disabled CTA · divider */
  --navy-100: #e3e7f1;   /* mode-tag chip background */

  /* ── Color · Surface · Cream ── */
  --paper:    #faf7ef;   /* page background */
  --cream-50: #fcfaf3;   /* card surfaces */
  --cream-100:#f6f0e2;   /* chrome · badges */
  --cream-200:#ece3cd;   /* browser chrome */
  --cream-300:#ddd1b3;

  /* ── Color · Accent · Brass (warm copper) ── */
  --brass-700:#8a571f;   /* hint button text · stamp */
  --brass-600:#a6692a;   /* stat headline · brass-accent */
  --brass-500:#b87333;   /* primary accent · TTS · Vollprüfung mark */
  --brass-400:#c98a4d;
  --brass-200:#ead2b1;   /* hint accordion border */
  --brass-100:#f4e6cf;   /* hint tint · BAMF tag bg */
  --brass-50: #faf2e3;   /* hint background */

  /* ── Color · Tier (translation quality — reserved) ── */
  --tier-green:#2d8659;  /* 🟢 BAMF original (DE) */
  --tier-amber:#d4a017;  /* 🟡 human translation (EN, JA) */
  --tier-red:  #b8404c;  /* 🔴 AI-only translation */

  /* ── Color · Semantic ── */
  --good-700:#1f6643;
  --good-500:#2d8659;
  --good-100:#d9ead8;
  --bad-700: #8d2a36;
  --bad-500: #b8404c;
  --bad-100: #f5dadc;

  /* ── Type ── */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;   /* H1 · stem · stat numerals */
  --font-sans:    "Inter Tight", "Inter", system-ui, sans-serif;     /* body · UI · buttons */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;         /* meta · numerals · BAMF stamp */

  /* Type scale */
  --t-hero:     104px;   /* Mündigkeit · desktop */
  --t-hero-m:    64px;   /* Mündigkeit · mobile */
  --t-display:   42px;   /* section heroes */
  --t-stat:      64px;   /* stat-card numbers */
  --t-h2:        24px;   /* stem · screen titles */
  --t-h3:        18px;   /* mode-card title */
  --t-body:      16px;   /* option text · paragraphs */
  --t-meta:      13px;   /* sub-copy */
  --t-caption:   12px;   /* trust chips · captions */
  --t-mono:      11px;   /* meta · uppercase */
  --t-mono-sm:   10px;   /* badges · tech credit */
  --tracking-mono: 1.4;  /* uppercase letter-spacing (em-relative px) */

  /* ── Spacing scale (4-base) ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-14: 56px;
  --s-18: 72px;

  /* ── Radius ── */
  --r-sm:   8px;   /* small chips · meta badges */
  --r-md:  12px;   /* option rows · feedback strip */
  --r-lg:  18px;   /* cards · question card · stat card */
  --r-xl:  24px;   /* result hero */
  --r-pill: 999px; /* chips · CTA · tier legend */

  /* ── Shadow (layered) ── */
  --shadow-sm:  0 1px 2px rgba(11,24,52,0.06), 0 1px 1px rgba(11,24,52,0.04);
  --shadow-md:  0 4px 14px -4px rgba(11,24,52,0.10), 0 2px 4px rgba(11,24,52,0.04);
  --shadow-lg:  0 22px 40px -22px rgba(11,24,52,0.22), 0 8px 16px -10px rgba(11,24,52,0.08);
  --shadow-cta: 0 14px 28px -12px rgba(11,24,52,0.45), 0 4px 8px -4px rgba(11,24,52,0.18);

  /* ── Border (hairline) ── */
  --hair:        1px solid rgba(11,24,52,0.10);
  --hair-strong: 1px solid rgba(11,24,52,0.22);

  /* ── Motion ── */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-quick: 0.16s;
  --dur-base:  0.22s;
  --dur-slow:  0.30s;
}

/* ───── Reference: component → token mapping ─────
 *
 * Primary CTA       background  var(--navy-900)
 *                   color       var(--cream-50)
 *                   radius      var(--r-pill)
 *                   shadow      var(--shadow-cta)
 *                   font        var(--font-display) 500 22px
 *
 * Question card     background  var(--cream-50)
 *                   border      var(--hair)         (Lernmodus)
 *                                1.5px var(--navy-800) (Vollprüfung "exam zone")
 *                   radius      var(--r-lg)
 *                   shadow      var(--shadow-lg)
 *
 * Hinweis (💡)      background  var(--brass-50)
 *                   border      1px var(--brass-200)
 *                   color       var(--brass-700)
 *                   radius      var(--r-md)
 *
 * Trust chip        background  rgba(252,250,243,0.6)
 *                   border      1px rgba(11,24,52,0.16)
 *                   color       var(--navy-700)
 *                   check       var(--brass-600)
 *                   radius      var(--r-pill)
 *
 * Stat-card number  font        var(--font-display) 500 var(--t-stat)
 *                   color       var(--brass-600) [accent]
 *                                | var(--navy-900) [neutral]
 *
 * Tier dot          green/amber/red — reserved exclusively for
 *                   translation quality (never used as state color)
 * ─────────────────────────────────────────────── */