@layer reset, tokens, base, layout, components, views, utilities;
/* Ruhiger Fokus – Design-Tokens. Werte exakt aus den Artboards (docs/design/ruhiger-fokus, <helmet><style>).
   Reihenfolge der Cascade Layers: ein späterer Layer gewinnt unabhängig von der Spezifität.
   `reset` (Element-Reset in base.css) hat die niedrigste Priorität. */

@layer tokens {
  /* ---------- Papier (Standard, auch ohne data-theme) ---------- */
  :root {
    color-scheme: light;
    --bg:#F6F4EF; --surface:#FFFFFF; --surface-2:#EEEBE4; --border:#E2DDD3;
    --text:#1E2227; --muted:#5C636D;
    --accent:#3A5A8A; --accent-text:#2E4B75; --on-accent:#FFFFFF;
    --good:#3D7A59; --bad:#A9533A; --warn:#94600F; --streak:#B5652E;
    --shadow-1:0 1px 2px rgb(30 34 39 / .05);
    --shadow-2:0 8px 24px rgb(30 34 39 / .08);
    --shadow-dock:0 -1px 0 var(--border),0 -12px 32px rgb(30 34 39 / .06);
    --scrim:rgb(30 34 39 / .32);
  }

  /* System ohne gesetztes Theme (vor dem ersten JS-Lauf): dunkel → Nacht */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --bg:#141619; --surface:#1B1E22; --surface-2:#23272C; --border:#2D3237;
      --text:#E9E7E2; --muted:#9DA3AA;
      --accent:#8EA8D4; --accent-text:#A8BEE2; --on-accent:#0F1620;
      --good:#83B89D; --bad:#E1937D; --warn:#D7B263; --streak:#E0A36F;
      --shadow-1:none; --shadow-2:0 8px 24px rgb(0 0 0 / .35); --shadow-dock:0 -1px 0 var(--border); --scrim:rgb(0 0 0 / .55);
    }
  }

  /* ---------- Nacht ---------- */
  :root[data-theme="night"] {
    color-scheme: dark;
    --bg:#141619; --surface:#1B1E22; --surface-2:#23272C; --border:#2D3237;
    --text:#E9E7E2; --muted:#9DA3AA;
    --accent:#8EA8D4; --accent-text:#A8BEE2; --on-accent:#0F1620;
    --good:#83B89D; --bad:#E1937D; --warn:#D7B263; --streak:#E0A36F;
    --shadow-1:none; --shadow-2:0 8px 24px rgb(0 0 0 / .35); --shadow-dock:0 -1px 0 var(--border); --scrim:rgb(0 0 0 / .55);
  }

  /* ---------- OLED (Nacht mit reinem Schwarz) ---------- */
  :root[data-theme="oled"] {
    color-scheme: dark;
    --bg:#000000; --surface:#101214; --surface-2:#181B1F; --border:#24282D;
    --text:#E9E7E2; --muted:#9DA3AA;
    --accent:#8EA8D4; --accent-text:#A8BEE2; --on-accent:#0F1620;
    --good:#83B89D; --bad:#E1937D; --warn:#D7B263; --streak:#E0A36F;
    --shadow-1:none; --shadow-2:none; --shadow-dock:0 -1px 0 var(--border); --scrim:rgb(0 0 0 / .7);
  }

  /* ---------- Aurora ---------- */
  :root[data-theme="aurora"] {
    color-scheme: dark;
    --bg:#0B0A14; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.08); --border:rgba(255,255,255,.12);
    --text:#F5F3FF; --muted:#A9A6C4;
    --accent:#A78BFA; --accent-text:#C4B5FD; --on-accent:#0B0A14;
    --good:#5EEAD4; --bad:#FDA4AF; --warn:#FCD34D; --streak:#FDBA74;
    --shadow-1:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.10);
    --shadow-2:0 12px 40px rgba(0,0,0,.45); --shadow-dock:inset 0 1px 0 rgba(255,255,255,.12); --scrim:rgb(0 0 0 / .6);
    --bg-fill:radial-gradient(110% 55% at 0% 0%,rgba(124,92,255,.42),transparent 62%),radial-gradient(80% 45% at 100% 8%,rgba(34,211,238,.26),transparent 60%),radial-gradient(90% 40% at 60% 105%,rgba(236,72,153,.18),transparent 65%),#0B0A14;
    --cta-bg:linear-gradient(135deg,#DDD6FE 0%,#A78BFA 38%,#67E8F9 100%);
    --cta-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 8px 32px rgba(139,92,246,.5),0 0 56px rgba(103,232,249,.28);
    --cta-gloss:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 52%);
    --cta-sheen:sheen 1.4s cubic-bezier(.22,1,.36,1) .5s 1 both;
    --hero-bg:linear-gradient(155deg,rgba(167,139,250,.30) 0%,rgba(103,232,249,.10) 55%,rgba(255,255,255,.04) 100%);
    --hero-shadow:inset 0 0 0 1px rgba(196,181,253,.30),inset 0 1px 0 rgba(255,255,255,.20),0 16px 48px rgba(124,92,255,.28);
    --glow-good:0 0 0 4px rgba(94,234,212,.12),0 0 36px rgba(94,234,212,.42);
    --glow-icon:drop-shadow(0 0 6px currentColor);
    --text-glow:0 0 28px rgba(167,139,250,.5);
    --pill-glow:0 0 18px rgba(167,139,250,.55),inset 0 0 0 1px rgba(196,181,253,.4);
  }

  /* ---------- Neon ---------- */
  :root[data-theme="neon"] {
    color-scheme: dark;
    --bg:#08090A; --surface:#121314; --surface-2:#1B1D1F; --border:#2A2D30;
    --text:#F2F4F0; --muted:#9BA19A;
    --accent:#D4FF3A; --accent-text:#D4FF3A; --on-accent:#0A0B05;
    --good:#3DFFB4; --bad:#FF7A59; --warn:#FFC53D; --streak:#FF4FD8;
    --shadow-1:inset 0 0 0 1px #24272A; --shadow-2:0 12px 40px rgba(0,0,0,.6); --shadow-dock:inset 0 1px 0 #2A2D30; --scrim:rgb(0 0 0 / .7);
    --bg-fill:radial-gradient(120% 45% at 50% -12%,rgba(212,255,58,.16),transparent 58%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/22px 22px,#08090A;
    --cta-bg:linear-gradient(180deg,#E6FF85 0%,#D4FF3A 55%,#B8EE1C 100%);
    --cta-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 0 28px rgba(212,255,58,.5),0 0 80px rgba(212,255,58,.2);
    --cta-gloss:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 50%);
    --cta-sheen:sheen 1.4s cubic-bezier(.22,1,.36,1) .5s 1 both;
    --hero-bg:linear-gradient(160deg,rgba(212,255,58,.12) 0%,rgba(18,19,20,1) 58%);
    --hero-shadow:inset 0 0 0 1px rgba(212,255,58,.38),0 0 36px rgba(212,255,58,.14);
    --glow-good:0 0 0 4px rgba(61,255,180,.12),0 0 36px rgba(61,255,180,.45);
    --glow-icon:drop-shadow(0 0 6px currentColor);
    --text-glow:0 0 24px rgba(212,255,58,.35);
    --pill-glow:0 0 18px rgba(212,255,58,.45),inset 0 0 0 1px rgba(212,255,58,.55);
  }

  /* ---------- Atmosphäre (neutral) und abgeleitete Farben ----------
     Gleiche Spezifität wie :root, aber niedriger als :root[data-theme="…"] → Aurora/Neon überschreiben. */
  :root {
    --bg-fill:var(--bg); --cta-bg:var(--accent); --cta-shadow:var(--shadow-2); --cta-gloss:none; --cta-sheen:none;
    --hero-bg:var(--surface); --hero-shadow:var(--shadow-1); --glow-good:none; --glow-icon:none; --text-glow:none; --pill-glow:none;
    --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);
    --good-soft:color-mix(in srgb,var(--good) 14%,transparent);
    --bad-soft:color-mix(in srgb,var(--bad) 14%,transparent);
    --warn-soft:color-mix(in srgb,var(--warn) 14%,transparent);
    --glass:color-mix(in srgb,var(--surface) 82%,transparent);
    --press:color-mix(in srgb,var(--text) 6%,transparent);
  }

  /* ---------- Typografie, Raster, Formen, Bewegung (themeunabhängig) ---------- */
  :root {
    --font:system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
    --font-num:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

    --text-xs:13px; --text-sm:15px; --text-md:17px; --text-lg:20px;
    --text-xl:clamp(24px, 7vw, 30px);
    --text-num:clamp(28px, 8vw, 36px);
    --text-display:clamp(40px, 12vw, 72px);
    --text-tab:12px; /* einzige Ausnahme unter 13 px */
    --weight-regular:400; --weight-semibold:600; --weight-bold:700;

    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

    --radius-sm:10px; --radius-key:12px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;

    --hit-min:44px; --hit-primary:56px;

    --dur-tap:100ms; --dur-state:200ms; --dur-enter:320ms; --dur-exit:200ms; --dur-progress:600ms;
    --ease-out:cubic-bezier(.22,1,.36,1);
    --press-transition:transform var(--dur-tap) var(--ease-out),filter var(--dur-state) var(--ease-out);

    /* Shell-Maße */
    --gutter:16px;
    --tabbar-h:64px;
    --tabbar-bottom:max(16px, env(safe-area-inset-bottom, 0px));
    --sidebar-w:84px; /* „Fortschritt“ passt ungekürzt (12 px, auch halbfett) */
    --content-max:640px;
    --focus-max:480px;
  }
}