/* =============================================================
   tokens.css — Design-Tokens
   Alle Design-Entscheidungen an einer Stelle.
   Accent tauschen: nur --accent aendern.
   ============================================================= */

:root {
  /* ---------- Farbe: Flaechen ---------- */
  --paper:        #f4f2ed;   /* Seitenhintergrund, warmes Papier */
  --paper-sunk:   #ece9e2;   /* eingesenkte Flaeche (Codeblock) */
  --ink:          #16161a;   /* Primaer-Text, Terminalflaeche */
  --ink-soft:     #23232a;   /* Terminalflaeche, eine Stufe heller */
  --ink-deep:     #0d0d10;   /* Sockel, Footer */

  /* ---------- Farbe: Text ---------- */
  --fg:           #16161a;   /* Text auf Papier, 16.1:1 */
  --fg-muted:     #55524c;   /* Sekundaertext, 6.4:1 */
  --fg-faint:     #6a675e;   /* Labels, 4.7:1 — nie heller, sonst unter AA */
  --fg-invert:    #f4f2ed;   /* Text auf Ink */
  --fg-invert-mu: #9c9990;   /* Sekundaertext auf Ink */

  /* ---------- Farbe: Akzent (EINE Farbe, wie typesafe.ai) ---------- */
  --accent:       #ffb000;   /* Amber, Retro-Finanzterminal */
  --accent-deep:  #8a5f00;   /* Akzent fuer Text auf Papier, 4.7:1 */
  --accent-on-in: #16161a;   /* Text auf Akzentflaeche */

  /* ---------- Farbe: Linien ---------- */
  --rule:         #d6d2c8;   /* Haarlinie auf Papier */
  --rule-strong:  #16161a;   /* Haarlinie auf Ink */
  --rule-faint:   #e6e2d9;   /* sehr schwache Trennlinie */

  /* ---------- Typografie ---------- */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --font-pixel: "VT323", "JetBrains Mono", ui-monospace, monospace;

  /* Fluid, clamp-basiert — skaliert ohne Breakpoints */
  --fs-display: clamp(2.75rem, 9vw, 7rem);
  --fs-h2:      clamp(1.75rem, 4.2vw, 3rem);
  --fs-h3:      clamp(1.125rem, 2vw, 1.375rem);
  --fs-body:    clamp(0.9375rem, 1.05vw, 1.0625rem);
  --fs-small:   0.8125rem;
  --fs-tiny:    0.6875rem;
  --fs-code:    0.8125rem;

  --lh-tight:  1.05;
  --lh-snug:    1.3;
  --lh-body:    1.65;

  --tracking-wide: 0.18em;   /* Label-Versalien */
  --tracking-mega: 0.34em;   /* Ticker */

  /* ---------- Raster ---------- */
  --shell:      74rem;      /* max. Inhaltsbreite */
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);
  --stack:      clamp(3.5rem, 9vw, 7.5rem);   /* Abstand zwischen Sections */

  /* ---------- Rahmen & Effekte ---------- */
  --bw:         1px;        /* Haarlinie — die einzige Linienstaerke */
  --radius:     0px;        /* echt retro: keine runden Ecken */
  --tap:        44px;       /* min. Tap-Ziel */

  /* ---------- Bewegung ---------- */
  --t-fast:     120ms;
  --t-base:     220ms;
  --ease:       cubic-bezier(0.2, 0, 0.1, 1);
}

/* Reduzierte Bewegung: Animationen aus, Inhalt bleibt sichtbar */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
  }
}