/*
 * tokens.css – Design Tokens. Einzige Quelle für Farbe, Schrift, Abstände,
 * Form, Tiefe und Bewegung. Komponenten verwenden nur diese Variablen.
 *
 * Richtung: ruhige Premium-Produktoberfläche.
 *   Hell   – warmes Off-White, Tinte, weiße Flächen, feine Linien
 *   Dunkel – tiefes Navy, abgestufte Flächen, ein kontrolliertes Blau
 * Ein einziger Akzent (Blau) in beiden Darstellungen.
 */
:root {
  /* ---------- Farbe: Hell ---------- */
  --bg: #f6f5f1;               /* Seite */
  --bg-glow: rgb(36 86 230 / 0.07);
  --surface: #ffffff;          /* Karten, Leisten */
  --surface-2: #f3f2ee;        /* abgesetzte Flächen, Hover */
  --surface-3: #ebe9e3;
  --field: #ffffff;            /* Eingaben */
  --border: #e4e1d9;
  --border-strong: #cdc9bf;
  --text: #0c1322;
  --text-2: #3a4458;
  --muted: #5d6678;            /* >= 4.5:1 auf --bg und --surface */
  --accent: #2456e6;
  --accent-hover: #1b45c4;
  --accent-ink: #ffffff;
  --accent-text: #2350d6;      /* Akzent als Schrift */
  --accent-soft: #ecf1ff;
  --accent-line: rgb(36 86 230 / 0.35);
  --success: #157347;
  --success-soft: #e6f4ec;
  --warning: #8a5a00;
  --warning-soft: #fbf1dc;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --focus: #2456e6;
  --overlay: rgb(12 19 34 / 0.04);
  --shadow-rgb: 18 24 40;

  /* ---------- Schrift (lokal, siehe fonts.css) ---------- */
  --font-sans: "Heros", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, sans-serif;
  --font-mono: "Liberation Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-2xs: 0.75rem;     /* 12px – nur Meta, nie Fließtext */
  --text-xs: 0.8125rem;    /* 13px */
  --text-sm: 0.9375rem;    /* 15px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.0625rem;    /* 17px */
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);
  --text-hero: clamp(2.5rem, 1.25rem + 5vw, 4.75rem);

  --leading-tight: 1.06;
  --leading-snug: 1.3;
  --leading: 1.6;
  --tracking-tight: -0.032em;
  --tracking-snug: -0.018em;
  --tracking-caps: 0.09em;

  /* ---------- Abstände (4er-Raster) ---------- */
  --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: 4rem;
  --space-20: 5rem;

  /* ---------- Form ---------- */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --border-w: 1px;

  /* ---------- Tiefe ---------- */
  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.06);
  --shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 8px 24px -12px rgb(var(--shadow-rgb) / 0.16);
  --shadow-lg: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 24px 48px -24px rgb(var(--shadow-rgb) / 0.28);
  --shadow-accent: 0 1px 2px rgb(36 86 230 / 0.25), 0 8px 20px -8px rgb(36 86 230 / 0.45);
  --ring: 0 0 0 4px rgb(36 86 230 / 0.16);
  --ring-danger: 0 0 0 4px rgb(180 35 24 / 0.12);
  --glow: none;

  /* ---------- Bewegung ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- Maße ---------- */
  --control-h: 3rem;        /* 48px Touch-Ziel */
  --control-h-sm: 2.5rem;   /* 40px */
  --aside-w: 20rem;
  --content-w: 46rem;
  --content-wide: 64rem;
}

/* ---------- Farbe: Dunkel ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070b14;
    --bg-glow: rgb(79 125 255 / 0.16);
    --surface: #0d1321;
    --surface-2: #121a2b;
    --surface-3: #18223a;
    --field: #0a101c;
    --border: rgb(160 178 220 / 0.12);
    --border-strong: rgb(160 178 220 / 0.24);
    --text: #eaeef7;
    --text-2: #bcc5d8;
    --muted: #8e99b2;
    --accent: #7ea4ff;
    --accent-hover: #9ab8ff;
    --accent-ink: #050a16;
    --accent-text: #9ab8ff;
    --accent-soft: rgb(126 164 255 / 0.12);
    --accent-line: rgb(126 164 255 / 0.45);
    --success: #5fd49c;
    --success-soft: rgb(95 212 156 / 0.12);
    --warning: #f0c565;
    --warning-soft: rgb(240 197 101 / 0.1);
    --danger: #ff8a7d;
    --danger-soft: rgb(255 138 125 / 0.1);
    --focus: #9ab8ff;
    --overlay: rgb(255 255 255 / 0.03);
    --shadow-rgb: 0 0 0;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 32px -16px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 32px 64px -32px rgb(0 0 0 / 0.85);
    --shadow-accent: 0 0 0 1px rgb(126 164 255 / 0.5), 0 8px 28px -8px rgb(79 125 255 / 0.6);
    --ring: 0 0 0 4px rgb(126 164 255 / 0.2);
    --ring-danger: 0 0 0 4px rgb(255 138 125 / 0.14);
    --glow: 0 0 0 1px rgb(126 164 255 / 0.35), 0 0 32px -6px rgb(79 125 255 / 0.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #070b14;
  --bg-glow: rgb(79 125 255 / 0.16);
  --surface: #0d1321;
  --surface-2: #121a2b;
  --surface-3: #18223a;
  --field: #0a101c;
  --border: rgb(160 178 220 / 0.12);
  --border-strong: rgb(160 178 220 / 0.24);
  --text: #eaeef7;
  --text-2: #bcc5d8;
  --muted: #8e99b2;
  --accent: #7ea4ff;
  --accent-hover: #9ab8ff;
  --accent-ink: #050a16;
  --accent-text: #9ab8ff;
  --accent-soft: rgb(126 164 255 / 0.12);
  --accent-line: rgb(126 164 255 / 0.45);
  --success: #5fd49c;
  --success-soft: rgb(95 212 156 / 0.12);
  --warning: #f0c565;
  --warning-soft: rgb(240 197 101 / 0.1);
  --danger: #ff8a7d;
  --danger-soft: rgb(255 138 125 / 0.1);
  --focus: #9ab8ff;
  --overlay: rgb(255 255 255 / 0.03);
  --shadow-rgb: 0 0 0;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 32px -16px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 32px 64px -32px rgb(0 0 0 / 0.85);
  --shadow-accent: 0 0 0 1px rgb(126 164 255 / 0.5), 0 8px 28px -8px rgb(79 125 255 / 0.6);
  --ring: 0 0 0 4px rgb(126 164 255 / 0.2);
  --ring-danger: 0 0 0 4px rgb(255 138 125 / 0.14);
  --glow: 0 0 0 1px rgb(126 164 255 / 0.35), 0 0 32px -6px rgb(79 125 255 / 0.45);
  color-scheme: dark;
}