/* RECALL — Design-Tokens "Ink & Ember": warmes Papier + dualer Pol (kühle Tinte
   für Struktur, warmer Ember für Belohnung). Echtes beleuchtetes Material statt
   flacher Kacheln. Light = Default; Dark nur via System (data-theme="auto"). */
:root {
  /* ── SUBSTRATE: warmes Papier, 7-stufige Tiefe ── */
  --c-base:        oklch(94.5% 0.013 84);
  --c-base-sunken: oklch(91.5% 0.017 82);
  --c-surface:     oklch(98.8% 0.007 86);
  --c-surface-2:   oklch(96.5% 0.010 85);
  --c-raised:      oklch(99.6% 0.004 88);
  --c-edge:        oklch(89%   0.016 84);
  --c-edge-strong: oklch(83%   0.020 82);

  /* ── INK: Text & kühle Struktur ── */
  --c-ink:         oklch(23% 0.028 268);
  --c-ink-soft:    oklch(44% 0.025 268);
  --c-ink-faint:   oklch(62% 0.020 268);
  --c-ink-ghost:   oklch(74% 0.014 268);

  /* ── ACCENT A · INK-INDIGO (Struktur/Fokus) ── */
  --c-accent:      oklch(54% 0.20 266);
  --c-accent-hi:   oklch(63% 0.19 272);
  --c-accent-deep: oklch(43% 0.18 264);
  --c-accent-wash: oklch(54% 0.20 266 / .10);
  --c-on-accent:   oklch(98% 0.015 266);

  /* ── ACCENT B · EMBER (Belohnung/Energie/Streak) ── */
  --c-ember:       oklch(70% 0.18 52);
  --c-ember-hi:    oklch(78% 0.16 62);
  --c-ember-deep:  oklch(58% 0.17 46);
  --c-streak:      var(--c-ember);
  --c-xp:          oklch(82% 0.16 88);
  --c-level:       oklch(72% 0.17 92);
  --c-level-d:     oklch(60% 0.16 92);
  --c-success:     oklch(66% 0.17 152);

  /* ── RATING-SKALA: 3 Stufen/Farbe (face/lift/base) ── */
  --c-again: oklch(60% 0.21 24); --c-again-lift: oklch(67% 0.20 28); --c-again-base: oklch(49% 0.19 22);
  --c-hard:  oklch(74% 0.155 70);--c-hard-lift:  oklch(81% 0.14 76); --c-hard-base:  oklch(63% 0.15 66); --c-hard-on: oklch(32% 0.09 62);
  --c-good:  oklch(66% 0.17 153);--c-good-lift:  oklch(73% 0.16 156);--c-good-base:  oklch(54% 0.16 150);
  --c-easy:  oklch(66% 0.145 234);--c-easy-lift: oklch(73% 0.135 238);--c-easy-base: oklch(55% 0.14 230);

  /* ── Rückwärts-Aliase (bestehende app.css/study.css) ── */
  --c-desk: var(--c-base); --c-desk-2: var(--c-base-sunken);
  --c-paper: var(--c-surface); --c-paper-edge: var(--c-edge);
  --c-accent-2: var(--c-accent-hi); --c-accent-ink: var(--c-on-accent);
  --c-accent-d: var(--c-accent-deep);
  --c-again-d: var(--c-again-base); --c-hard-d: var(--c-hard-base);
  --c-good-d: var(--c-good-base); --c-easy-d: var(--c-easy-base);

  /* ── TYPOGRAFIE (CJK-First) ── */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-cjk:     "Noto Sans SC", "Noto Sans JP", "Hiragino Sans",
                  "Microsoft YaHei", system-ui, sans-serif;
  --font-ruby:    "Noto Sans SC", system-ui, sans-serif;

  --t-hero:   clamp(2.75rem, 1.2rem + 6.5vw, 5.25rem);
  --t-h1:     clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
  --t-h2:     clamp(1.3rem, 1rem + 1.3vw, 1.7rem);
  --t-body:   clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  --t-label:  0.76rem;
  --t-micro:  0.68rem;

  /* KARTEN-ACHSE — container-basiert (cqi), eigene Floor-Größe → kein Overflow */
  --t-card:    clamp(1.4rem, 1.05rem + 2vw, 2.1rem); /* Alias, falls noch referenziert */
  --t-card-xl: clamp(1.6rem, 0.9rem + 5cqi, 3rem);
  --t-card-lg: clamp(1.3rem, 0.9rem + 3cqi, 2rem);
  --t-card-md: clamp(1.05rem, 0.9rem + 1.5cqi, 1.35rem);
  --t-card-sm: clamp(0.85rem, 0.8rem + 0.8cqi, 1rem);
  --t-ruby:    0.5em;

  --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700; --w-black:800;
  --track-tight:-0.02em; --track-label:0.08em;

  /* ── SPACING (8pt + fluide Rhythmus-Stufen) ── */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem;
  --gap-card:    clamp(1rem, 0.6rem + 2cqi, 1.75rem);
  --gap-section: clamp(2rem, 1.5rem + 4vw, 4rem);

  /* ── RADIUS (gestuft nach Hierarchie) ── */
  --r-xs:.375rem; --r-sm:.625rem; --r-btn:.9rem; --r-tile:1.25rem;
  --r-card:1.75rem; --r-sheet:1.5rem 1.5rem 0 0; --r-pill:999px;

  /* ── TIEFE: gerichtet, mehrschichtig, getönt ── */
  --tint-shadow: 268;
  --sh-1: 0 1px 2px oklch(20% .03 var(--tint-shadow) / .07);
  --sh-2: 0 1px 2px oklch(20% .03 var(--tint-shadow) / .06),
          0 4px 10px oklch(20% .03 var(--tint-shadow) / .08);
  --sh-3: 0 2px 4px oklch(20% .03 var(--tint-shadow) / .07),
          0 12px 28px oklch(20% .03 var(--tint-shadow) / .12);
  --sh-4: 0 4px 8px oklch(20% .03 var(--tint-shadow) / .10),
          0 24px 56px oklch(20% .03 var(--tint-shadow) / .20);
  --sh-hero: var(--sh-3), inset 0 1px 0 oklch(100% 0 0 / .55);
  --hl-top:  inset 0 1px 0 oklch(100% 0 0 / .55);
  --sh-inset: inset 0 1px 3px oklch(20% .03 var(--tint-shadow) / .14);
  /* Aliase */
  --sh-sm: var(--sh-1); --sh-card: var(--sh-3); --sh-pop: var(--sh-4);

  /* ── MOTION ── */
  --dur-instant:80ms; --dur-tap:130ms; --dur-quick:220ms;
  --dur-reveal:320ms; --dur-swipe:380ms; --dur-reward:640ms; --dur-levelup:900ms;
  --dur-flip:460ms; /* Alias, falls noch referenziert */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-snap:   cubic-bezier(.2,.9,.25,1);
  --ease-bounce: cubic-bezier(.34,1.7,.5,1);

  /* HEATMAP — auf dem Ember-Pol (eine Glut-Geschichte statt fremdem GitHub-Grün) */
  --heat-0: var(--c-base-sunken);
  --heat-1: oklch(86% .07 70); --heat-2: oklch(80% .12 64);
  --heat-3: oklch(74% .16 58); --heat-4: oklch(66% .19 52);

  /* layout */
  --tabbar-h:4.5rem; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"], :root[data-theme="dark"] {
    --c-base:oklch(17% .022 274); --c-base-sunken:oklch(14% .020 274);
    --c-surface:oklch(23% .024 272); --c-surface-2:oklch(27% .026 271);
    --c-raised:oklch(31% .028 270); --c-edge:oklch(34% .026 272); --c-edge-strong:oklch(42% .030 271);
    --c-ink:oklch(95% .012 90); --c-ink-soft:oklch(78% .014 90);
    --c-ink-faint:oklch(60% .014 92); --c-ink-ghost:oklch(48% .012 92);
    --c-accent:oklch(68% .18 270); --c-accent-hi:oklch(75% .16 274);
    --c-accent-deep:oklch(55% .17 266); --c-accent-wash:oklch(68% .18 270 / .16); --c-on-accent:oklch(16% .03 270);
    --c-ember:oklch(74% .17 56); --c-ember-hi:oklch(82% .15 64); --c-ember-deep:oklch(62% .16 48);
    --c-xp:oklch(84% .15 90); --c-level:oklch(74% .15 92); --c-success:oklch(70% .16 154);
    --c-again:oklch(64% .20 26);--c-again-lift:oklch(71% .19 30);--c-again-base:oklch(52% .18 24);
    --c-hard:oklch(76% .15 72);--c-hard-lift:oklch(83% .14 78);--c-hard-base:oklch(64% .15 68);--c-hard-on:oklch(28% .08 60);
    --c-good:oklch(69% .16 154);--c-good-lift:oklch(76% .15 157);--c-good-base:oklch(56% .16 151);
    --c-easy:oklch(70% .14 236);--c-easy-lift:oklch(77% .13 240);--c-easy-base:oklch(57% .14 232);
    --tint-shadow:274; --hl-top:inset 0 1px 0 oklch(100% 0 0 / .08);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--c-desk);
  color: var(--c-ink);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  font-optical-sizing: auto;
}
/* Display-Headlines bei großer optischer Größe → feiner, edler Schnitt */
.brand-mark, h1, h2, .screen-title, .lh-name, .lu-kicker, .complete h1 {
  font-variation-settings: 'opsz' 96; letter-spacing: var(--track-tight);
}
/* Zahlen springen nicht mehr (countUp/HUD/Stats/Heatmap) */
.sb-num, .hud-n, .stat-box .v, .cstat .v, .ap-time, .rate-btn .iv, .study-counter,
.goal-info h3, .lh-sub, .lvl-badge, .lh-badge, .dd-n {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}