/* ================================================================
   actualskit Design-System · Tokens
   Gemeinsame Grundwerte für Dashboard (dashboard.actualskit.de) und Landingpage (actualskit.de).
   Nur Dark Mode. Stil-Vorbild: ruhig, fast schwarz, feine Linien, ein Akzent (Indigo-Violett).
   Seiten verwenden nur diese Variablen – keine festen Farben/Abstände im eigenen CSS.
   ================================================================ */

:root {
  color-scheme: dark;

  /* ---- Flächen (von hinten nach vorne) ---- */
  --bg: #08090a;              /* Seitenhintergrund */
  --bg-sunken: #050506;       /* Konsole, Code, Log */
  --surface: #0f1011;         /* Karten, Seitenleiste */
  --surface-2: #141516;       /* Tabellenkopf, Chips, Eingabefelder */
  --surface-3: #1c1d1f;       /* Hover, aktiver Menüpunkt */
  --surface-4: #232427;       /* gedrückt, Tooltip */
  --overlay: rgba(4, 4, 5, .72);  /* Hintergrund hinter Menü/Dialog am Handy */

  /* ---- Linien ---- */
  --border: rgba(255, 255, 255, .075);
  --border-strong: rgba(255, 255, 255, .13);
  --border-focus: rgba(113, 112, 255, .55);
  --highlight: rgba(255, 255, 255, .045);   /* feine Lichtkante oben an Karten (inset) */

  /* ---- Text ---- */
  --text: #f7f8f8;
  --text-2: #d0d6e0;          /* Fließtext in längeren Texten (etwas ruhiger als --text) */
  --muted: #8a8f98;           /* Nebentext, Beschriftungen */
  --faint: #62666d;           /* Platzhalter, Zeitstempel, Gruppen-Überschriften */
  --on-accent: #ffffff;

  /* ---- Akzent: Indigo-Violett (sparsam: Hauptbutton, aktiver Menüpunkt, Links, Fokus) ---- */
  --accent: #7170ff;          /* Text, Icons, Linien */
  --accent-strong: #5e6ad2;   /* gefüllte Flächen (Button) */
  --accent-hover: #6b76e0;
  --accent-soft: rgba(113, 112, 255, .14);
  --accent-glow: rgba(113, 112, 255, .35);

  /* ---- Status (nur für Zustände, nie als Deko) ---- */
  --green: #4cb782;
  --green-soft: rgba(76, 183, 130, .13);
  --orange: #f2994a;
  --orange-soft: rgba(242, 153, 74, .13);
  --red: #eb5757;
  --red-soft: rgba(235, 87, 87, .13);
  --blue: #4ea7fc;
  --blue-soft: rgba(78, 167, 252, .13);

  /* ---- Diagramme / Balken ---- */
  --chart-1: #7170ff;
  --chart-2: #8a8f98;
  --chart-fill: rgba(113, 112, 255, .12);
  --track: rgba(255, 255, 255, .06);

  /* ---- Schrift ---- */
  --font: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-display: clamp(40px, 7vw, 76px);   /* nur Landingpage */
  --fw-regular: 400;
  --fw-medium: 510;
  --fw-semibold: 590;
  --lh-tight: 1.15;
  --lh: 1.55;
  --tracking-tight: -.022em;    /* Überschriften */
  --tracking-display: -.04em;   /* große Überschriften */

  /* ---- Abstände (4er-Raster) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --gutter: clamp(16px, 4vw, 40px);   /* Seitenrand, wächst mit der Breite */
  --content-max: 1200px;

  /* ---- Formen ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;
  --control-h: 32px;       /* Buttons, Eingabefelder */
  --control-h-sm: 26px;
  --control-h-lg: 40px;

  /* ---- Schatten ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 16px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35);
  --ring: 0 0 0 3px rgba(113, 112, 255, .28);

  /* ---- Bewegung ----
     Dashboard: schnell und dezent (--dur-1/2/3). Landingpage darf --dur-4/5 nutzen.
     prefers-reduced-motion schaltet alles ab (base.css). */
  --ease: cubic-bezier(.16, 1, .3, 1);       /* „ease-out-expo“: schnell an, weich aus */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 100ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 480ms;
  --dur-5: 800ms;

  /* ---- Ebenen ---- */
  --z-sticky: 10;
  --z-nav: 40;
  --z-overlay: 50;
  --z-toast: 60;
}