/* Handschrift – Design-Tokens v1.2 „Mac-Schreibtisch“ (12.10.2026). Quelle: handschrift.studio/Brand/DESIGNSYSTEM.md */
:root {
  /* Farbe: warmes Papier als Schreibtisch, Fenster hell, Graphit, eine Akzentfarbe */
  --bg: #ECE8E1;             /* Schreibtisch */
  --surface: #FBFAF8;        /* Fenster, Formulare */
  --surface-2: #E3DED5;      /* ruhige Flächen, Code, Tags */
  --ink: #1C1D20;
  --ink-2: #5E5B55;          /* Nebentext (Kontrast auf --bg ca. 5,6:1, auf --surface ca. 6,5:1) */
  --ink-3: #8C877E;          /* nur Deko, nie Fließtext */
  --line: #DDD7CD;
  --graphite: #2B2D31;
  --accent: #2E46D8;         /* Kobalt: Haupt-Button, Auswahl, Fokus. Sonst nirgends */
  --accent-ink: #FFFFFF;
  --stage: #0E0F11;          /* dunkle Bühne für Videos */
  --term: #1B1C1F;           /* Terminal-Fenster */
  --stage-ink: #F2F3F5;
  --stage-ink-2: #9A9EA6;
  --dot: #CFC9BF;            /* Fensterpunkte, neutral, keine Ampelfarben */
  --dot-dark: #3B3D42;
  --glass: rgba(236, 232, 225, .72);
  --glass-blur: 20px;
  --ok: #3F7D58;
  --warn: #A86A1F;
  --error: #B3412F;

  /* Schrift */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;   /* nur Italic, höchstens zweimal pro Seite */
  --font-mono: ui-monospace, Menlo, "SF Mono", monospace; /* nur in Fenstern: Terminal, Dateinamen */
  --track-display: -0.04em;
  --size-12: 12px; --size-14: 14px; --size-16: 16px; --size-18: 18px; --size-20: 20px;
  --size-24: 24px; --size-32: 32px; --size-44: 44px; --size-60: 60px; --size-84: 84px;

  /* Abstand (4-px-Raster) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;
  --content-max: 1240px;

  /* Form und Tiefe */
  --radius-tag: 6px; --radius-input: 12px; --radius-win: 14px; --radius-media: 28px; --radius-pill: 999px;
  --win-bar: 30px;
  --shadow-win: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 60px rgba(40, 30, 20, .18);
  --shadow-win-sm: 0 0 0 1px rgba(0, 0, 0, .07), 0 10px 30px rgba(40, 30, 20, .10);
  --focus-ring: 0 0 0 3px var(--accent);

  /* Bewegung */
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 400ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}