/* moviefriends Design-Tokens als Tailwind-CSS-4-Theme.
 * Generiert aus packages/design-tokens/tokens.json mit `pnpm tokens:build` – nicht von Hand ändern.
 *
 * Einbinden (nach @import "tailwindcss"):
 *   @import "@moviefriends/design-tokens/tailwind-theme.css";
 *
 * - Farben: bg-surface, text-fg-2, border-line, text-gold, bg-paper-bg, text-brand-star …
 * - Schriften: font-display (Big Shoulders), font-body (Instrument Sans)
 * - Skalen mit Präfix „mf-“ (Tailwinds Standardskalen bleiben unverändert):
 *   text-mf-ui, leading-mf-display, tracking-mf-eyebrow, rounded-mf-xl, shadow-mf-lift,
 *   h-mf-touch, max-w-mf-content-max, ease-mf-standard
 * - Abstände: Tailwinds Standard (4-px-Raster) entspricht space.* – p-1 = 4 px, p-1.5 = 6 px …
 * - Schriftschnitte: Tailwinds Standard (font-medium 500 … font-extrabold 800). */

@theme {
  --color-bg: #0F0D0B; /* Nachtschwarz – Seitenhintergrund (Kinosaal) */
  --color-surface: #1A1714; /* Sitzreihe – Karten, Panels */
  --color-surface-2: #241F1A; /* Bühnenboden – erhöhte Flächen, Chips, Bildplatzhalter */
  --color-surface-sunken: #15120F; /* Eingelassene Flächen, z. B. Chat-Verlauf (A3) */
  --color-line: #3A322A; /* Holz – Standard-Rahmen von Karten, Buttons, Eingabefeldern */
  --color-line-subtle: #2A2520; /* Trennlinien, z. B. unter der Kopfzeile */
  --color-line-strong: #4A4035; /* Gestrichelte Platzhalter („Rolle hinzufügen“), Ränder von Farbfeldern */
  --color-line-disabled: #6B5F50; /* Gestrichelte Rahmen deaktivierter Aktionen */
  --color-fg: #F3ECE2; /* Elfenbein – Haupttext, Leinwand, „movie“ in der Wortmarke */
  --color-fg-soft: #D9CFC1; /* Heller Sekundärtext (Bildunterschriften, Fließtext in Karten) */
  --color-fg-2: #C9BEAE; /* Gedämpfter Text (Website, Navigation) */
  --color-fg-muted: #B8AC9A; /* Sekundärtext, Meta-Infos, inaktive Navigation (Screens) */
  --color-fg-3: #A89C8A; /* Notizen, Kleingedrucktes */
  --color-gold: #F0B24A; /* Kinogold – Akzent, Hauptbutton, aktive Zustände, Links, Fokusring, „friends“ in der Wortmarke */
  --color-gold-hover: #FFD088; /* Link-Hover */
  --color-gold-button-hover: #F6C46A; /* Hauptbutton Hover */
  --color-gold-ink: #1C1405; /* Text auf Gold */
  --color-gold-tint: #3B2A12; /* Gold getönte Fläche – eigene Sprechblasen, Avatar mit Goldrand */
  --color-ok: #74D19B; /* Grünes Licht – fertig, bestanden, Ampel „Grün“ */
  --color-ok-soft: #B9E8CB; /* Text in grünen Chips */
  --color-ok-surface: #1F3A2C; /* Grüne Fläche (Kommentar-Marker, Status) */
  --color-ok-surface-2: #16251C; /* Grüne Karte „Gesamt: Grün“ (A4) */
  --color-warn: #F2994A; /* Hinweis/Warnung – Ampel „Gelb“, z. B. unscharfes Foto */
  --color-warn-soft: #F2B98A; /* Text auf Warn-Fläche */
  --color-warn-surface: #2E1C12; /* Warn-Fläche (Foto-Hinweis) */
  --color-danger: #EF6F6C; /* Fehler – Ampel „Rot“ */
  --color-danger-surface: #3A2424; /* Rote Avatar-/Statusfläche */
  --color-filmstrip: #2E2822; /* Perforation im Produktions-Fortschrittsband (A2–A6) */
  --color-paper-bg: #EFE6D6; /* Papier */
  --color-paper-bg-2: #E2D5BE; /* Papier, Rand/Bildfläche */
  --color-paper-fold: #D8CBB4; /* Eselsohr */
  --color-paper-ink: #2A2118; /* Schrift auf Papier */
  --color-paper-ink-muted: #6E5D47; /* Sekundärtext auf Papier */
  --color-paper-ink-gold: #8A5A12; /* Gold-Überschrift auf Papier */
  --color-track-1: #4E6A8C; /* Spur 1 */
  --color-track-2: #6A4E8C; /* Spur 2 */
  --color-track-3: #4E8C6A; /* Spur 3 */
  --color-brand-star: #F0B24A; /* Stern / „friends“ auf dunklem Grund */
  --color-brand-tail: #F3ECE2; /* Filmstreifen-Schweif / „movie“ auf dunklem Grund */
  --color-brand-star-on-light: #D8962A; /* Stern auf hellem Grund */
  --color-brand-friends-on-light: #A86A10; /* „friends“ auf hellem Grund */
  --color-brand-ink-on-light: #2A2118; /* Schweif und „movie“ auf hellem Grund */
  --color-brand-light-bg: #F3ECE2; /* Heller Grund (Elfenbein), zugleich Perforation der hellen Variante */
  --color-brand-muted-on-light: #5C4E3D; /* Sekundärtext auf hellem Grund */
  --color-overlay-caption: rgba(15, 13, 11, 0.78); /* Bild-Overlay für Labels auf Fotos */
  --color-overlay-header: rgba(15, 13, 11, 0.92); /* Sticky-Kopfzeile (mit backdrop-filter: blur(8px)) */

  --font-display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif; /* Überschriften, Wortmarke, große Zahlen – Überschriften in Versalien, die Wortmarke immer klein */
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Fließtext, UI */

  --text-mf-2xs: 11px; /* Winzige Labels (Zeitstrahl) */
  --text-mf-xs: 12px; /* Versal-Labels (Eyebrow), Badges */
  --text-mf-sm: 13px; /* Kleingedrucktes, Chips */
  --text-mf-ui: 14px; /* Häufigste UI-Größe (Meta, Chips, Tabs) */
  --text-mf-md: 15px; /* Navigation */
  --text-mf-base: 16px; /* Grundschrift App */
  --text-mf-body-web: 17px; /* Grundschrift Website */
  --text-mf-lg: 18px; /* Hervorgehobener Text */
  --text-mf-lead-web: 19px; /* Lead-Absatz Website */
  --text-mf-xl: 20px; /* Big Shoulders 700: Karten-/Phasentitel */
  --text-mf-2xl: 28px; /* Big Shoulders 800: Panel-Titel */
  --text-mf-3xl: 34px; /* Big Shoulders 700: Abschnittstitel (H2) */
  --text-mf-4xl: 40px; /* Big Shoulders 800: Seitentitel mobil */
  --text-mf-5xl: 56px; /* Big Shoulders 800: große Headline */
  --text-mf-6xl: 72px; /* Big Shoulders 800: Seiten-Headline (H1, A1) */
  --text-mf-logo-header: 30px; /* Wortmarke in der Kopfzeile */
  --text-mf-logo-board: 150px; /* Wortmarke auf dem Logo-Board (A7) */

  --leading-mf-display: 0.95; /* Headlines (0,9–1,0) */
  --leading-mf-tight: 1.1; /* Kurze Titel, Zahlen */
  --leading-mf-body: 1.5; /* Fließtext App */
  --leading-mf-body-web: 1.6; /* Fließtext Website */

  --tracking-mf-eyebrow: 0.14em; /* Versal-Labels 12 px, z. B. „STUDIO-LOBBY“, „02 · LÄUFT“; auch der Zusatz neben der Wortmarke („HQ“) */
  --tracking-mf-eyebrow-wide: 0.2em; /* Weite Versal-Labels 13–14 px */
  --tracking-mf-heading: 0.03em; /* Big Shoulders H2 */
  --tracking-mf-display: 0.01em; /* Big Shoulders H1, Wortmarke */

  --radius-mf-xs: 3px; /* Fortschrittsbalken, Zeitstrahl-Clips */

  --radius-mf-sm: 4px; /* Thumbnails, kleine Flächen, Sprechblasen-Spitze */

  --radius-mf-md: 6px; /* Buttons, Eingabefelder, Bilder */

  --radius-mf-lg: 8px; /* Listen-Karten, Chat-Eingabe, Farbfelder */

  --radius-mf-xl: 10px; /* Karten und Panels */

  --radius-mf-bubble: 14px; /* Sprechblasen; die Ecke zum Absender hat radius.sm (Leo: oben links, eigene: oben rechts) */

  --radius-mf-pill: 999px; /* Chips, Avatare, Badges, runde Buttons */

  --spacing-mf-control-sm: 36px; /* Kleiner Button/Chip */

  --spacing-mf-control: 40px; /* Standard-Button/Chip-Höhe */

  --spacing-mf-touch: 44px; /* Mindest-Klickfläche, Avatar */

  --spacing-mf-control-lg: 48px; /* Großer Button, Eingabefeld */

  --spacing-mf-button-web: 50px; /* Website-CTA */

  --spacing-mf-focus-ring: 2px; /* Breite des Fokusrings (Kinogold) */

  --spacing-mf-focus-offset: 2px; /* Abstand des Fokusrings (Website: 3 px) */

  --spacing-mf-content-max: 1360px; /* Max. Inhaltsbreite App */

  --spacing-mf-content-max-web: 1200px; /* Max. Inhaltsbreite Website */

  --spacing-mf-screen-width: 1440px; /* Entwurfsbreite Desktop */

  --spacing-mf-screen-width-mobile: 390px; /* Kleinste unterstützte Breite */

  --shadow-mf-lift: 0px 24px 60px 0px rgba(0, 0, 0, 0.55); /* Schwebendes Element – Drehbuch als Buch (A5), Dialoge */

  --shadow-mf-gold-glow: 0px 0px 12px 0px #F0B24A; /* Leuchtpunkt im Lauflicht (Website) */

  --ease-mf-standard: cubic-bezier(0.2, 0, 0, 1); /* Standard für fast alles */
  --ease-mf-enter: cubic-bezier(0, 0, 0.2, 1); /* Elemente erscheinen */
  --ease-mf-exit: cubic-bezier(0.4, 0, 1, 1); /* Elemente verschwinden */
  --ease-mf-linear: cubic-bezier(0, 0, 1, 1); /* Lauflicht, Fortschritt */
}