/* ==========================================================================
   tokens.css — Farben, Typo-Stapel, Maße, Kurven.
   Einzige Quelle für Werte. Andere Dateien greifen nur über var() zu.
   ========================================================================== */

:root {
  /* --- Flächen ---------------------------------------------------------- */
  --void:        #06070D;
  --glass:       rgba(18, 20, 32, 0.55);
  --glass-hover: rgba(28, 31, 48, 0.68);
  --hairline:    rgba(255, 255, 255, 0.13);

  /* --- Schrift ----------------------------------------------------------- */
  --ink:   #FFFFFF;
  --ink-2: #E4E7F0;
  --ink-3: #A8ADC0;
  --ink-4: #7D8296;

  /* --- Prioritäten (Blau-Orange-Achse, rot-grün-sicher) ------------------ */
  --prio-1: #E8712F;  /* kritisch  */
  --prio-2: #F0B429;  /* wichtig   */
  --prio-3: #4A9EEA;  /* standard  */
  --prio-4: #767C92;  /* optional  */

  /* --- Signale ----------------------------------------------------------- */
  --gain: #5FD3A0;
  --loss: #FF8A6B;
  --link: #8FB8FF;

  /* --- Schriftfamilien ---------------------------------------------------- */
  --font-data:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-ui:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-voice: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* --- Formen ------------------------------------------------------------- */
  --radius-card:    14px;
  --radius-control: 10px;
  --radius-pill:    999px;
  --border:         0.5px solid var(--hairline);

  /* --- Raster ------------------------------------------------------------- */
  --shell-max:  1500px;
  --shell-pad:  40px;
  --gap:        16px;

  /* --- Kurven ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Dauern ------------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-mid:  220ms;
  --dur-slow: 380ms;

  /* --- Parallaxe (von js gesetzt) ---------------------------------------- */
  --par-x: 0px;
  --par-y: 0px;
  --par-bg-x: 0px;
  --par-bg-y: 0px;
}

/* Prioritätsstufen als adressierbare Paare: Farbe + Flächenton.
   Der Flächenton ist die dritte, von Farbe unabhängige Unterscheidung. */
[data-prio="1"] { --prio: var(--prio-1); --prio-wash: rgba(232, 113, 47, 0.14); }
[data-prio="2"] { --prio: var(--prio-2); --prio-wash: rgba(240, 180, 41, 0.10); }
[data-prio="3"] { --prio: var(--prio-3); --prio-wash: rgba(74, 158, 234, 0.07); }
[data-prio="4"] { --prio: var(--prio-4); --prio-wash: rgba(118, 124, 146, 0.04); }