/**
 * design-tokens.css
 * =================
 * Zentrale Design-Tokens fuer den Digitale-Rendite-Rechner.
 *
 * Design-Sprache: Swiss-Editorial, warm-minimalistisch
 * Akzent:         WiBe-Blau (#1C4195)
 * Typografie:     Space Grotesk (Display) · Inter (Body) · IBM Plex Mono (Zahlen)
 */

:root {
  /* Primaerfarben */
  --t-accent:            #1C4195;
  --t-accent-hover:      #153580;
  --t-accent-light:      rgba(28, 65, 149, 0.10);
  --t-accent-subtle:     rgba(28, 65, 149, 0.03);

  /* Hintergruende */
  --t-bg:                #FAFAF8;
  --t-surface:           #F0EFEB;
  --t-surface-white:     #FFFFFF;
  --t-surface-dark:      #1A1A1A;

  /* Texte */
  --t-text:              #1A1A1A;
  --t-text-secondary:    #6B6B63;
  --t-text-muted:        #8C8C84;
  --t-text-placeholder:  #CCCCCC;
  --t-text-on-accent:    #FAFAF8;

  /* Rahmen */
  --t-border:            #E2E1DC;
  --t-border-light:      #F0EFEB;

  /* Statusfarben */
  --t-green:             #2E7D32;
  --t-green-bg:          #E8F5E9;
  --t-amber:             #F57F17;
  --t-amber-bg:          #FFF8E1;
  --t-red:               #E53935;
  --t-red-bg:            rgba(229, 57, 53, 0.08);

  /* Typografie */
  --t-font-display:      'Space Grotesk', system-ui, sans-serif;
  --t-font-body:         'Inter', system-ui, sans-serif;
  --t-font-mono:         'IBM Plex Mono', monospace;

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

  --t-section-size:      18px;
  --t-section-weight:    600;
  --t-section-tracking:  -0.01em;

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

  --t-label-size:        12px;
  --t-label-weight:      500;
  --t-label-tracking:    0.04em;

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

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

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

  /* Abstande */
  --t-page-padding-x:    48px;
  --t-page-padding-y:    40px;
  --t-gap-section:       36px;
  --t-gap-group:         16px;
  --t-gap-element:       8px;
  --t-tile-padding:      24px;
  --t-input-padding-x:   12px;
  --t-input-padding-y:   10px;
  --t-form-label-gap:    6px;
  --t-form-field-gap:    16px;

  /* Radien */
  --t-radius-sm:         6px;
  --t-radius-md:         8px;
  --t-radius-lg:         12px;
  --t-radius-pill:       20px;

  /* Schatten */
  --t-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.05);
  --t-shadow-md:         0 2px 8px rgba(0, 0, 0, 0.08);

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