/* Romic Supply — Design-Tokens (Swiss/International, Light-Theme).
   Farbe streng semantisch: Ampel + eine Akzentfarbe, Rest Grauskala. */
:root {
  /* Fläche & Tinte */
  --paper: #f6f6f4;
  --surface: #ffffff;
  --ink: #191b1f;
  --ink-2: #4b5058;
  --ink-3: #7c828b;
  --line: #e2e3df;
  --line-strong: #191b1f;

  /* Akzent (Interaktion: Links, Buttons, Focus) */
  --accent: #1a3a6b;
  --accent-hover: #12294d;
  --accent-ink: #ffffff;
  --accent-soft: #eaeef5;

  /* Ampel (engine.types.TrafficLight) — DIE Farbe im Produkt */
  --light-black: #191b1f;
  --light-black-bg: #e8e8e6;
  --light-red: #b3402f;
  --light-red-bg: #f7e7e4;
  --light-yellow: #8a6400;
  --light-yellow-bg: #f7eecf;
  --light-green: #2f6f4f;
  --light-green-bg: #e4f0e9;
  --light-lblue: #3d6f9e;
  --light-lblue-bg: #e4edf5;
  --light-dblue: #1f4064;
  --light-dblue-bg: #dde5ee;

  /* Typografie */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: 0.95rem;
  --text-lg: 1.25rem;
  --text-num-xl: clamp(2rem, 1.4rem + 2vw, 3rem);

  /* Rhythmus */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.75rem;
  --space-5: 3rem;
  --radius: 2px;
  --nav-width: 12.5rem;
  --duration: 140ms;
}