/* ===========================================================================
   Flixi: Tokens des Flixtake-Designsystems
   Uebernommen aus /root/flixtake/packages/tokens/src/tokens.css (Stand 24.09.2026).
   Flixi liegt ausserhalb des Monorepos und bekommt die Tokens deshalb als Kopie.
   Werte hier nie von Hand aendern, sondern im Paket und dann neu uebernehmen
   (Stand mit 328a37d: Tooltip- und Leistenfarben, eb130a4: --dur-dreh und
   --dur-puls). Nur der Abschnitt "Flixi"
   am Ende ist eigen und leitet nur aus vorhandenen Tokens ab.
   =========================================================================== */

:root {
  /* --- Grundpalette --- */
  --ink-900: #0E0E12;
  --ink-800: #16151D;
  --ink-700: #1C1B25;
  --ink-600: #232230;

  --indigo-deep: #221F4E;
  --indigo-600: #5A4CE0;
  --indigo-500: #6A5CF0;
  --indigo-400: #8275F4;
  --indigo-300: #A99FF8;
  --indigo-100: #EEEBFF;

  --white: #FFFFFF;
  --lavender-grey: #9B99BD;
  --lavender-dim: #6E6C8C;

  --paper-0: #FFFFFF;
  --paper-50: #FBFBFA;
  --paper-100: #F7F6F3;
  --paper-200: #F1F0EC;
  --ink-text: #1A1A19;
  --ink-muted: #5B5A55;
  --ink-dim: #908F8A;

  --positive: #4FD08A;
  --warning: #F0C24B;
  --danger: #F0556A;

  /* --- Dunkles Design (Standard) --- */
  --bg-page: var(--ink-900);
  --bg-warm: var(--ink-800);
  --bg-bar: var(--indigo-deep);
  --surface-card: var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-inset: var(--ink-600);

  --text-primary: var(--white);
  --text-muted: var(--lavender-grey);
  --text-dim: var(--lavender-dim);
  --text-on-accent: var(--white);

  --accent: var(--indigo-500);
  --accent-hover: var(--indigo-400);
  --accent-quiet: var(--indigo-deep);
  --highlight-bg: rgba(106, 92, 240, 0.22);
  --highlight-text: var(--white);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --overlay-hover: rgba(255, 255, 255, 0.05);
  --overlay-press: rgba(255, 255, 255, 0.09);
  --scrim: rgba(10, 10, 14, 0.72);

  --shadow-sm: none;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-panel: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -28px rgba(0,0,0,0.7);
  --shadow-pop: 0 12px 40px -12px rgba(0,0,0,0.6);

  /* --- Schrift --- */
  --font-sans: "Geist", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-h4: 1.25rem;
  --leading-normal: 1.55;

  /* --- Radien --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --bar-height: 56px;

  /* --- Bewegung --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --dur-dreh: 800ms;         /* eine Umdrehung des Ladekreises, die einzige endlose Bewegung */
  --dur-puls: 1600ms;        /* ein Durchlauf des Warte-Pulses (denkt nach, schreibt) */

  /* --- Designsystem: Abstaende, Hoehen, Auswahl --- */
  --abstand-s: 8px;
  --abstand-m: 16px;
  --abstand-l: 24px;
  --hoehe-abzeichen: 20px;
  --hoehe-klein: 28px;
  --hoehe-steuer: 36px;
  --hoehe-touch: 44px;
  --hoehe-kopf: 56px;
  --auswahl-bg: var(--highlight-bg);
  --auswahl-text: var(--white);
  --auswahl-symbol: var(--indigo-300);

  /* --- Tooltip, umgekehrt zum Theme (Paket tokens, 328a37d) --- */
  --danger-quiet: rgba(240, 85, 106, 0.12);
  --tooltip-bg: #ECEBF3;
  --tooltip-text: #16151D;
  --tooltip-kuerzel: rgba(22, 21, 29, 0.55);
  --tooltip-schatten: 0 10px 28px -10px rgba(0, 0, 0, 0.6);

  /* --- Leiste, in beiden Themes gleich (Paket tokens, 328a37d) --- */
  --bar-bg: var(--indigo-deep);
  --bar-linie: rgba(255, 255, 255, 0.08);
  --bar-text: var(--white);
  --bar-text-gedimmt: #C9C7E6;
  --bar-trenner: rgba(255, 255, 255, 0.18);
  --bar-hover: rgba(255, 255, 255, 0.07);
  --bar-press: rgba(255, 255, 255, 0.12);
  --bar-knopf-bg: rgba(255, 255, 255, 0.04);
  --bar-knopf-rand: rgba(255, 255, 255, 0.12);
  --bar-privat: #3A3768;
  --bar-app-id: linear-gradient(135deg, #6A5CF0, #8275F4);
  --bar-app-cloud: linear-gradient(135deg, #43C5D6, #5BD3E0);
  --bar-app-mail: linear-gradient(135deg, #6A5CF0, #7C6FF2);
  --bar-app-docs: linear-gradient(135deg, #5B8DEF, #7AA6F5);
  --bar-app-sheets: linear-gradient(135deg, #34C759, #4FD08A);
  --bar-app-slides: linear-gradient(135deg, #F0A24B, #F0C24B);
  --bar-app-kalender: linear-gradient(135deg, #F0556A, #F47186);
  --bar-app-meets: linear-gradient(135deg, #A678F0, #BB92F4);
  --bar-app-studio: linear-gradient(135deg, #EC4899, #F472B6);
  --bar-app-coda: linear-gradient(135deg, #6366F1, #818CF8);
  --bar-app-flixi: linear-gradient(135deg, #6A5CF0, #8275F4);

  /* --- Flixi: nur aus Tokens abgeleitet, keine neuen Farbwerte --- */
  /* Codebloecke sind in beiden Designs dunkel, wie das Farbschema von highlight.js. */
  --code-bg: var(--ink-900);
  --code-text: var(--paper-200);
  --code-meta: var(--lavender-grey);
  --inline-code-bg: var(--overlay-press);
  --danger-border: color-mix(in srgb, var(--danger) 36%, transparent);
  --bild-schleier: color-mix(in srgb, var(--ink-900) 92%, transparent);
  --auf-bild: var(--white);
  --auf-bild-flaeche: color-mix(in srgb, var(--white) 8%, transparent);
  --auf-bild-hover: color-mix(in srgb, var(--white) 16%, transparent);
}

[data-theme="light"] {
  --bg-page: var(--paper-0);
  --bg-warm: var(--paper-100);
  --bg-bar: var(--paper-0);
  --surface-card: var(--paper-0);
  --surface-raised: var(--paper-100);
  --surface-inset: var(--paper-200);

  --text-primary: var(--ink-text);
  --text-muted: var(--ink-muted);
  --text-dim: var(--ink-dim);
  --text-on-accent: var(--white);

  --accent: var(--indigo-500);
  --accent-hover: var(--indigo-600);
  --accent-quiet: var(--indigo-100);
  --highlight-bg: #E4DEFF;
  --highlight-text: var(--ink-text);

  --border: rgba(20, 19, 28, 0.10);
  --border-strong: rgba(20, 19, 28, 0.18);
  --overlay-hover: rgba(20, 19, 28, 0.04);
  --overlay-press: rgba(20, 19, 28, 0.08);
  --scrim: rgba(26, 26, 25, 0.42);

  --shadow-sm: 0 1px 2px rgba(20,19,28,0.06);
  --shadow-card: 0 1px 2px rgba(20,19,28,0.05), 0 6px 20px -8px rgba(20,19,28,0.10);
  --shadow-panel: 0 1px 2px rgba(20,19,28,0.06), 0 24px 60px -24px rgba(20,19,28,0.18);
  --shadow-pop: 0 8px 30px -8px rgba(20,19,28,0.22);

  --auswahl-text: var(--ink-text);
  --auswahl-symbol: var(--indigo-600);

  --tooltip-bg: #1B1A24;
  --tooltip-text: #F4F3FA;
  --tooltip-kuerzel: rgba(244, 243, 250, 0.6);
  --tooltip-schatten: 0 10px 28px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);

}