/* AI:AT-Tokens: einzige Quelle für Farbe, Schrift, Form und Bewegung.
   Farbwerte gemessen auf ai-at.eu (29.10.2026, --lg-*), Status-Kapseln und Bewegung aus dem
   Skill aiat-motion-design (references/style.md). Schrift: Geist, OFL (fonts/OFL.txt). */

@font-face { font-family: 'Geist'; src: url('fonts/Geist-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  /* Marke */
  --blue: #005af0;
  --blue-press: #0048c2;
  --blue-light: #f3f6fd;
  --blue-soft: #dde8fc;
  --lime: #c6f2b8;
  --lime-soft: #ebfde4;
  --green-text: #2f6b1c;

  /* Neutrale */
  --white: #ffffff;
  --grey-50: #f7f7f7;
  --grey-100: #f0f0f0;
  --grey-300: #c9c9c9;
  --grey-400: #a1a1a1;
  --text: #000000;
  --text-2: #616161;
  --text-3: #707070; /* eine Stufe dunkler als ai-at.eu #757575, damit 4,5:1 auch auf Grau und Hellblau hält */

  /* Status-Kapseln: Fläche / Schrift */
  --chip-blue-bg: #e4edff;   --chip-blue-fg: #11408f;
  --chip-green-bg: #eafbe6;  --chip-green-fg: #1d5a2a;
  --chip-yellow-bg: #fff6dd; --chip-yellow-fg: #6b4a00;
  --chip-grey-bg: #eff1f4;   --chip-grey-fg: #4f5867;
  --chip-red-bg: #ffe9e6;    --chip-red-fg: #9a1c10;
  --chip-ink-bg: #000000;    --chip-ink-fg: #ffffff;
  --danger: #b3261b;
  --live: #5cc93f;
  --error-dot: #ff8a7a;

  /* Überlagerungen */
  --tint-1: rgba(0, 0, 0, 0.04);
  --tint-2: rgba(0, 0, 0, 0.06);
  --scrim: rgba(0, 0, 0, 0.28);
  --on-blue: rgba(255, 255, 255, 0.18);
  --on-grey: rgba(255, 255, 255, 0.7);

  /* Schrift */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --track-mono: 0.06em;

  /* Form */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-pill: 999px;
  --line: 2px solid var(--grey-100);
  --u: 8px;

  /* Tiefe: neutral, mit Versatz */
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 10px 20px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.12);
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.06), 0 32px 80px rgba(0, 0, 0, 0.10);

  /* Bewegung: expo.out wie in der Marke, kurze UI-Dauern */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
  --dur-flash: 1400ms;
  --dur-4: 450ms;
  --dur-5: 420ms;
  /* Material-Kurven: betont abbremsen beim Ankommen, betont beschleunigen beim Gehen */
  --ease-emph: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emph-in: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* State-Layer: Deckkraft der Zustandsfläche über der Grundfarbe (Material) */
  --sl-hover: 8%;
  --sl-focus: 10%;
  --sl-press: 14%;
}

/* Animierbare Zustandsfläche, damit Hover und Druck weich ein- und ausblenden. */
@property --sl { syntax: '<color>'; inherits: false; initial-value: transparent; }