/**
 * design-tokens.css
 * =================
 * Zentrale Design-Tokens fuer den Digitale-Rendite-Rechner.
 *
 * Design-Sprache: "Ampel und Zahl" (Issue #79). Ein einziges Blau in fuenf
 *                 Stufen, kein neutrales Grau. Rot, Gelb und Gruen gehoeren
 *                 allein der Ampel und stehen als dunkle Schrift auf getoentem
 *                 Grund, nie als Textfarbe auf Weiss.
 * Typografie:     Familjen Grotesk (Titel, Urteile, grosse Zahlen)
 *                 Atkinson Hyperlegible (Text, Felder, Tabellen; vom Braille
 *                 Institute fuer Lesbarkeit entworfen, I/l/1 und O/0 sind
 *                 unterscheidbar)
 *                 JetBrains Mono (Zahlenspalten)
 * Lesbarkeit:     16 px Grundgroesse, Felder 48 px hoch, Kontraste ueber 4,5:1
 *                 (Fliesstext) und ueber 7:1 (Tinte auf Grund), BITV 2.0.
 */

:root {
  /* Blau in Stufen: Tinte, Aktion, Nebentext, Rand, Grund */
  --t-accent:            #1C4195;
  --t-accent-hover:      #153580;
  --t-accent-light:      #E4EAF7;
  --t-accent-subtle:     #F3F5FA;

  /* Hintergruende */
  --t-bg:                #F3F5FA;
  --t-surface:           #E9EDF5;
  --t-surface-white:     #FFFFFF;

  /* Texte; --t-ink-rgb ist dieselbe Tinte fuer rgba()-Toenungen */
  --t-text:              #0B1F4B;
  --t-ink-rgb:           11, 31, 75;
  --t-text-secondary:    #4A5A80;
  --t-text-placeholder:  #66759A;
  --t-text-on-accent:    #FFFFFF;

  /* Rahmen */
  --t-border:            #C9D2E6;
  --t-border-light:      #DDE3F0;
  --t-border-strong:     #8A99BF;

  /* Ampel: Flaechenfarbe (Punkte, Balken), getoenter Grund, dunkle Schrift */
  --t-green:             #2E7D32;
  --t-green-bg:          #E4F2E5;
  --t-green-text:        #1B5E20;
  --t-amber:             #F2A900;
  --t-amber-bg:          #FFF3D6;
  --t-amber-text:        #7A4F00;
  --t-red:               #C62828;
  --t-red-bg:            #FBE9E7;
  --t-red-text:          #8A1F16;

  /* Typografie */
  --t-font-display:      'Familjen Grotesk', system-ui, sans-serif;
  --t-font-body:         'Atkinson Hyperlegible', system-ui, sans-serif;
  --t-font-mono:         'JetBrains Mono', ui-monospace, monospace;

  --t-display-size:      32px;
  --t-display-weight:    700;
  --t-display-tracking:  -0.02em;

  --t-section-size:      20px;
  --t-section-weight:    700;
  --t-section-tracking:  -0.01em;

  --t-body-size:         16px;
  --t-body-weight:       400;

  --t-label-size:        15px;
  --t-label-weight:      700;

  --t-small-size:        14px;
  --t-caption-size:      13px;

  --t-stat-size:         32px;
  --t-stat-weight:       700;
  --t-stat-tracking:     -0.03em;

  --t-mono-size:         15px;
  --t-mono-weight:       500;

  /* Abstaende */
  --t-page-padding-x:    48px;
  --t-page-padding-y:    36px;
  --t-gap-section:       32px;
  --t-gap-group:         16px;
  --t-gap-element:       8px;
  --t-tile-padding:      24px;
  --t-input-padding-x:   14px;
  --t-input-padding-y:   10px;
  --t-input-height:      48px;
  --t-form-label-gap:    6px;
  --t-form-field-gap:    18px;
  /* Platz, den der klebende Kopf beim Springen zu Ankern verdeckt */
  --t-header-offset:     100px;

  /* Radien: bewusst klein, das Produkt ist ein Formular, keine App-Kachel */
  --t-radius-sm:         4px;
  --t-radius-md:         6px;
  --t-radius-lg:         8px;
  --t-radius-pill:       999px;

  /* Schatten nur fuer schwebende Elemente (Dialog, Tooltip) */
  --t-shadow-md:         0 4px 16px rgba(var(--t-ink-rgb), 0.14);

  /* Fokusring: sichtbar auf allen Gruenden */
  --t-focus-ring:        0 0 0 3px #C9D6F5;

  /* Transitions */
  --t-transition:        150ms ease;
}