/* tokens.css - Design-Token, Palette A "Signal".
   Einzige CSS-Datei mit Hex-Werten (Ausnahme: critical.css). */

@layer reset, base, layout, components, utilities;

:root {
  /* Farben, Light (Standard) */
  --surface: #f7f6f2;
  --surface-raised: #fdfcf8;
  --text: #181a1f;
  --text-muted: #4c5058;
  --accent: #1b49d6;
  --accent-contrast: #f8f7f3;
  --border: #d9d6cc;
  --focus: #1b49d6;
  --status-ok: #1e6b34;
  --status-warn: #7a5200;
  --status-err: #b02a1e;
  color-scheme: light;

  /* Typografie */
  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.44rem);
  --text-xl: clamp(1.44rem, 1.28rem + 0.8vw, 1.85rem);
  --text-2xl: clamp(1.73rem, 1.46rem + 1.3vw, 2.36rem);
  --text-3xl: clamp(2.07rem, 1.66rem + 2vw, 3.02rem);
  --text-4xl: clamp(2.49rem, 1.9rem + 2.9vw, 3.87rem);
  --lh-display: 1.1;
  --lh-body: 1.6;

  /* Spacing, 4px-Basis; grosse Stufen fluid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: clamp(3rem, 2.4rem + 2.5vw, 4rem);
  --space-20: clamp(3.5rem, 2.6rem + 4vw, 5rem);
  --space-24: clamp(4rem, 2.8rem + 5.5vw, 6rem);

  /* Form */
  --radius: 4px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--border);

  /* Raster */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 3rem);

  /* Bewegung */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.4, 1);
  --dur-micro: 160ms;
  --dur-standard: 280ms;
  --dur-reveal: 560ms;

  /* Ebenen */
  --z-header: 50;
  --z-dropdown: 60;
  --z-dialog: 100;
  --z-skip: 200;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* Federkurve mit minimalem Ueberschwingen */
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%,
      0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.163 27%, 1.154 32.6%,
      1.051 42%, 1.014 50.5%, 1.001 62.5%, 0.999 73.8%, 1.001);
  }
}

/* Abgeleitete Flaechen und der einzige Farbverlauf der Website */
:root {
  --surface-sunken: color-mix(in srgb, var(--text) 4%, var(--surface));
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
  --shadow-md: 0 10px 28px -12px color-mix(in srgb, var(--text) 22%, transparent);
  /* Messfeld-Wash hinter dem Instrumenten-Panel im Hero */
  --wash: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 13%, var(--surface)) 0%,
      var(--surface) 62%);
  /* Schraffur fuer "in Entwicklung" und "manuell" (Linienmuster, kein Verlauf im Sinne der Regel) */
  --hatch: repeating-linear-gradient(-45deg,
      var(--border) 0 1px, transparent 1px 7px);
}

:root[data-theme="dark"] {
  --surface: #14161b;
  --surface-raised: #1d2027;
  --text: #f0eee7;
  --text-muted: #a8acb6;
  --accent: #82a5ff;
  --accent-contrast: #101321;
  --border: #363b46;
  --focus: #82a5ff;
  --status-ok: #6fc98a;
  --status-warn: #e3b34c;
  --status-err: #f08a7d;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface: #14161b;
    --surface-raised: #1d2027;
    --text: #f0eee7;
    --text-muted: #a8acb6;
    --accent: #82a5ff;
    --accent-contrast: #101321;
    --border: #363b46;
    --focus: #82a5ff;
    --status-ok: #6fc98a;
    --status-warn: #e3b34c;
    --status-err: #f08a7d;
    color-scheme: dark;
  }
}