/* ==========================================================================
   jordanweb.de v2 — Design-Tokens
   Einzige Quelle fuer Farben, Typo-Skala, Abstaende, Radien, Schatten,
   Motion und Z-Ebenen. Komponenten referenzieren ausschliesslich Tokens.
   Farbstrategie: "Leitstand bei Nacht" — Tiefblau traegt die Marke
   (Committed), Cyan ist das Instrumentenlicht, Gruen nur fuer Status.
   ========================================================================== */

:root {
  /* ---- Farb-Rampe (OKLCH, Hue ~250 = Markenblau) -------------------- */
  --blue-950: oklch(0.17 0.035 250);  /* Leitstand-Nacht: Hero, Footer   */
  --blue-900: oklch(0.24 0.06 255);   /* Markenblau, Primaer-Buttons     */
  --blue-800: oklch(0.31 0.07 255);   /* Hover auf Primaer               */
  --blue-700: oklch(0.40 0.08 253);   /* Links auf hellem Grund          */
  --blue-100: oklch(0.93 0.02 245);   /* getoente Flaechen (hell)        */
  --cyan-500: oklch(0.67 0.12 220);   /* Akzent auf hellem Grund         */
  --cyan-400: oklch(0.78 0.11 215);   /* Instrumentenlicht auf dunkel    */
  --green-500: oklch(0.70 0.14 160);  /* Status: laeuft                  */
  --amber-500: oklch(0.76 0.13 80);   /* Status: Hinweis                 */
  --red-600: oklch(0.55 0.19 25);     /* Fehler                          */

  /* ---- Neutrale (leicht Richtung Markenblau getoent) ------------------ */
  --ink-900: oklch(0.24 0.03 250);    /* Fliesstext                      */
  --ink-700: oklch(0.40 0.03 248);    /* Sekundaertext                   */
  --ink-500: oklch(0.49 0.02 246);    /* Meta, nur >= 0.875rem           */
  --paper:   oklch(0.975 0.005 240);  /* Seitengrund hell                */
  --surface: oklch(1 0 0);            /* Karten, Inputs                  */
  --line:    oklch(0.90 0.012 245);   /* Rahmen, Trenner                 */

  /* ---- Auf dunklem Grund (blue-950/900) -------------------------------- */
  --on-dark:        oklch(0.95 0.008 240);
  --on-dark-muted:  oklch(0.76 0.025 240);
  --on-dark-line:   oklch(0.34 0.045 250);

  /* ---- Semantische Aliase ---------------------------------------------- */
  --color-bg: var(--paper);
  --color-ink: var(--ink-900);
  --color-accent: var(--cyan-500);
  --color-brand: var(--blue-900);
  --focus-ring: 0 0 0 3px oklch(0.78 0.11 215 / 0.55);

  /* ---- Typografie ------------------------------------------------------- */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  /* Skala ~1.25; Display gedeckelt (kein Schreien) */
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  clamp(1.9rem, 1.35rem + 1.8vw, 2.5rem);
  --fs-3xl:  clamp(2.3rem, 1.55rem + 2.6vw, 3.4rem);
  --fs-display: clamp(2.7rem, 1.9rem + 3.4vw, 4.6rem);

  --lh-tight: 1.12;
  --lh-base: 1.65;
  --ls-display: -0.028em;

  /* ---- Abstaende (4px-Basis + fluide Sektionsabstaende) ----------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(4.5rem, 4vw + 3rem, 7.5rem);
  --sp-section-sm: clamp(2.75rem, 2vw + 2rem, 4rem);

  /* ---- Radien ------------------------------------------------------------ */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- Schatten (blau getoent, weich) ------------------------------------ */
  --shadow-sm: 0 1px 2px oklch(0.24 0.06 255 / 0.07);
  --shadow-md: 0 4px 16px oklch(0.24 0.06 255 / 0.10);
  --shadow-lg: 0 12px 40px oklch(0.24 0.06 255 / 0.16);

  /* ---- Motion (praezise, kein Bounce) ------------------------------------ */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 700ms;

  /* ---- Z-Ebenen (semantisch, keine 9999er) -------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Layout ------------------------------------------------------------- */
  --container: 71.25rem;   /* 1140px */
  --measure: 70ch;         /* max. Zeilenlaenge Fliesstext */
}

/* Breakpoints (Dokumentation — CSS-Variablen funktionieren nicht in @media):
   sm: 640px · md: 900px · lg: 1200px
   Grids ohne Breakpoints: repeat(auto-fit, minmax(280px, 1fr)) */