/* ===========================================================================
   FLIXTAKE — Aperture Design System · token entry point (@flixtake/tokens)
   Ported 1:1 from the Aperture design-system bundle (_ds/tokens/*).

   Two themes: dark (default :root) and light ([data-theme="light"]).
   Marketing/explainer pages run LIGHT (Notion-style warm paper); web-apps run
   either, toggled by the user. Indigo #6A5CF0 is the accent in BOTH.

   The legacy --ft-* variables (consumed by @flixtake/ui and earlier apps) are
   kept as a thin compatibility layer mapped onto the new semantic tokens, so
   nothing downstream breaks.
   =========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* --- Base palette (raw, theme-independent) --- */
  --ink-900: #0E0E12;
  --ink-800: #16151D;
  --ink-700: #1C1B25;
  --ink-600: #232230;

  --indigo-deep: #221F4E;
  --indigo-600: #5A4CE0;       /* darker indigo — primary on LIGHT */
  --indigo-500: #6A5CF0;       /* primary indigo accent */
  --indigo-400: #8275F4;       /* indigo hover on dark */
  --indigo-300: #A99FF8;
  --indigo-100: #EEEBFF;       /* light indigo tint */

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

  /* Warm paper neutrals (light theme) */
  --paper-0: #FFFFFF;
  --paper-50: #FBFBFA;
  --paper-100: #F7F6F3;        /* warm cream section */
  --paper-200: #F1F0EC;
  --ink-text: #1A1A19;         /* near-black warm text */
  --ink-muted: #5B5A55;
  --ink-dim: #908F8A;

  /* Semantic status */
  --positive: #4FD08A;
  --warning: #F0C24B;
  --danger: #F0556A;

  /* =========================== DARK THEME (default) ==================== */
  --bg-page: var(--ink-900);
  --bg-warm: var(--ink-800);          /* alternating section */
  --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);   /* marker pill behind a word */
  --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);

  /* Light theme leans on soft shadows; dark stays flat. */
  --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);

  /* App canvas work-surface */
  --canvas-bg: #0A0A0F;
  --canvas-dot: rgba(255,255,255,0.05);

  /* ============================ Typography ============================= */
  --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;
  --weight-bold: 700;   /* marketing headlines */
  --weight-black: 800;  /* hero display only */

  --text-display-xl: 6rem;   /* 96px — marketing hero */
  --text-display: 4.25rem;   /* 68px */
  --text-h1: 3rem;           /* 48px */
  --text-h2: 2.25rem;        /* 36px */
  --text-h3: 1.5rem;         /* 24px */
  --text-h4: 1.25rem;        /* 20px */
  --text-body-lg: 1.125rem;  /* 18px — sublines */
  --text-body: 1rem;         /* 16px */
  --text-sm: 0.875rem;       /* 14px */
  --text-xs: 0.75rem;        /* 12px — labels, meta */

  --leading-tight: 1.04;     /* display / headlines */
  --leading-snug: 1.2;
  --leading-normal: 1.55;    /* body */

  --tracking-display: -0.03em;
  --tracking-head: -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.02em;   /* tiny labels only */

  /* ========================= Spacing / radius ========================= */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  --container-max: 1200px;
  --container-pad: var(--space-5);
  --bar-height: 56px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 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 (design/DESIGNSYSTEM.md). Verbindlich, keine Ausnahmen. =====
     Abstände: in Apps nur 0, S, M, L. Keine anderen Werte für margin, padding, gap. */
  --abstand-s: 8px;
  --abstand-m: 16px;
  --abstand-l: 24px;
  /* Höhen */
  --hoehe-abzeichen: 20px;
  --hoehe-klein: 28px;
  --hoehe-steuer: 36px;      /* Knopf, Symbolknopf, Eingabefeld, Listenzeile, Menüeintrag */
  --hoehe-touch: 44px;       /* Zeile und Tippfläche auf dem Handy */
  --hoehe-kopf: 56px;        /* Leiste, Kopfzeile von Panel, Fenster, Dialog */
  /* Ausgewählter Zustand (Navigation, Listen) */
  --auswahl-bg: var(--highlight-bg);
  --auswahl-text: var(--white);
  --auswahl-symbol: var(--indigo-300);
  /* Zerstörendes beim Überfahren (Symbolknopf, Menüeintrag mit data-gefahr) */
  --danger-quiet: rgba(240, 85, 106, 0.12);
  /* Tooltip, umgekehrt zum Theme: hell auf dunklen Seiten, dunkel auf hellen */
  --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 (Flixtake Bar). In beiden Themes gleich, immer Indigo. ===== */
  --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);   /* Organisations-Knopf */
  --bar-knopf-rand: rgba(255, 255, 255, 0.12);
  --bar-privat: #3A3768;                        /* Kachel „Privat“ */
  /* App-Kacheln im App-Menü */
  --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);

  /* ===================== Legacy --ft-* compatibility =================== */
  /* Mapped onto the new semantic tokens; they flip with [data-theme]. */
  --ft-bg: var(--bg-page);
  --ft-surface: var(--surface-card);
  --ft-surface-2: var(--surface-inset);
  --ft-bar: var(--indigo-deep);            /* the Flixtake Bar stays indigo */
  --ft-accent: var(--accent);
  --ft-accent-hover: var(--accent-hover);
  --ft-on-accent: var(--text-on-accent);
  --ft-text: var(--text-primary);
  --ft-muted: var(--text-muted);
  --ft-line: var(--border);
  --ft-tile: var(--indigo-100);
  --ft-tile-ink: var(--accent);
  --ft-radius: var(--radius-md);
  --ft-radius-lg: var(--radius-lg);
  --ft-font: var(--font-sans);
}

/* ============================== LIGHT THEME ============================== */
[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);

  --canvas-bg: #F3F2EF;
  --canvas-dot: rgba(20,19,28,0.06);

  --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);
}

/* ============================== Base reset ============================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-head);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--indigo-500); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--indigo-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}