/* moviefriends Design-Tokens · Stil A „Kinosaal“ – CSS-Variablen.
 * Generiert aus packages/design-tokens/tokens.json mit `pnpm tokens:build` – nicht von Hand ändern.
 * Einbinden: @import "@moviefriends/design-tokens/tokens.css"; Schriften selbst hosten (z. B. @fontsource). */

:root {
  /* ---- color ---- */
  --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 ---- */
  --font-family-display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif; /* Überschriften, Wortmarke, große Zahlen – Überschriften in Versalien, die Wortmarke immer klein */
  --font-family-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Fließtext, UI */
  --font-weight-regular: 400; /* Instrument Sans – Fließtext */
  --font-weight-medium: 500; /* Instrument Sans – Navigation */
  --font-weight-semibold: 600; /* Instrument Sans – Labels; Big Shoulders klein */
  --font-weight-bold: 700; /* Instrument Sans – Buttons; Big Shoulders – Abschnittstitel */
  --font-weight-extrabold: 800; /* Big Shoulders – Headlines, Wortmarke */
  --font-size-2xs: 11px; /* Winzige Labels (Zeitstrahl) */
  --font-size-xs: 12px; /* Versal-Labels (Eyebrow), Badges */
  --font-size-sm: 13px; /* Kleingedrucktes, Chips */
  --font-size-ui: 14px; /* Häufigste UI-Größe (Meta, Chips, Tabs) */
  --font-size-md: 15px; /* Navigation */
  --font-size-base: 16px; /* Grundschrift App */
  --font-size-body-web: 17px; /* Grundschrift Website */
  --font-size-lg: 18px; /* Hervorgehobener Text */
  --font-size-lead-web: 19px; /* Lead-Absatz Website */
  --font-size-xl: 20px; /* Big Shoulders 700: Karten-/Phasentitel */
  --font-size-2xl: 28px; /* Big Shoulders 800: Panel-Titel */
  --font-size-3xl: 34px; /* Big Shoulders 700: Abschnittstitel (H2) */
  --font-size-4xl: 40px; /* Big Shoulders 800: Seitentitel mobil */
  --font-size-5xl: 56px; /* Big Shoulders 800: große Headline */
  --font-size-6xl: 72px; /* Big Shoulders 800: Seiten-Headline (H1, A1) */
  --font-size-logo-header: 30px; /* Wortmarke in der Kopfzeile */
  --font-size-logo-board: 150px; /* Wortmarke auf dem Logo-Board (A7) */
  --font-line-height-display: 0.95; /* Headlines (0,9–1,0) */
  --font-line-height-tight: 1.1; /* Kurze Titel, Zahlen */
  --font-line-height-body: 1.5; /* Fließtext App */
  --font-line-height-body-web: 1.6; /* Fließtext Website */
  --font-letter-spacing-eyebrow: 0.14em; /* Versal-Labels 12 px, z. B. „STUDIO-LOBBY“, „02 · LÄUFT“; auch der Zusatz neben der Wortmarke („HQ“) */
  --font-letter-spacing-eyebrow-wide: 0.2em; /* Weite Versal-Labels 13–14 px */
  --font-letter-spacing-heading: 0.03em; /* Big Shoulders H2 */
  --font-letter-spacing-display: 0.01em; /* Big Shoulders H1, Wortmarke */

  /* ---- typography ---- */
  --typography-wordmark: 800 30px/1 "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif; /* Wortmarke „moviefriends“ – immer klein, „movie“ Elfenbein, „friends“ Kinogold */
  --typography-wordmark-suffix: 600 15px/1 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Zusatz neben der Wortmarke („HQ“, „Brand“): Versalien, Elfenbein, halbe Wortmarken-Größe */
  --typography-display: 800 72px/0.95 "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif; /* Seiten-Headline (H1), Versalien */
  --typography-heading: 700 34px/1.1 "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif; /* Abschnittstitel (H2), Versalien */
  --typography-title: 700 20px/1.1 "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif; /* Karten- und Phasentitel (H3), Versalien */
  --typography-eyebrow: 700 12px/1.1 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Versal-Label über Überschriften („02 · LÄUFT“) */
  --typography-body: 400 16px/1.5 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Fließtext App */
  --typography-body-web: 400 17px/1.6 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Fließtext Website */
  --typography-ui: 500 14px/1.5 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* UI-Text: Meta, Chips, Tabs */
  --typography-button: 700 16px/1 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Beschriftung von Buttons */

  /* ---- space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px; /* Seitenrand mobil */
  --space-5: 20px;
  --space-6: 24px; /* Innenabstand Karten */
  --space-8: 32px; /* Seitenrand Screens */
  --space-10: 40px;
  --space-14: 56px; /* Abstand zwischen Abschnitten */
  --space-1_5: 6px;
  --space-2_5: 10px;
  --space-3_5: 14px;

  /* ---- radius ---- */
  --radius-xs: 3px; /* Fortschrittsbalken, Zeitstrahl-Clips */
  --radius-sm: 4px; /* Thumbnails, kleine Flächen, Sprechblasen-Spitze */
  --radius-md: 6px; /* Buttons, Eingabefelder, Bilder */
  --radius-lg: 8px; /* Listen-Karten, Chat-Eingabe, Farbfelder */
  --radius-xl: 10px; /* Karten und Panels */
  --radius-bubble: 14px; /* Sprechblasen; die Ecke zum Absender hat radius.sm (Leo: oben links, eigene: oben rechts) */
  --radius-pill: 999px; /* Chips, Avatare, Badges, runde Buttons */

  /* ---- size ---- */
  --size-control-sm: 36px; /* Kleiner Button/Chip */
  --size-control: 40px; /* Standard-Button/Chip-Höhe */
  --size-touch: 44px; /* Mindest-Klickfläche, Avatar */
  --size-control-lg: 48px; /* Großer Button, Eingabefeld */
  --size-button-web: 50px; /* Website-CTA */
  --size-focus-ring: 2px; /* Breite des Fokusrings (Kinogold) */
  --size-focus-offset: 2px; /* Abstand des Fokusrings (Website: 3 px) */
  --size-content-max: 1360px; /* Max. Inhaltsbreite App */
  --size-content-max-web: 1200px; /* Max. Inhaltsbreite Website */
  --size-screen-width: 1440px; /* Entwurfsbreite Desktop */
  --size-screen-width-mobile: 390px; /* Kleinste unterstützte Breite */

  /* ---- border ---- */
  --border-default: 1px solid #3A322A; /* Karten, Buttons, Felder */
  --border-subtle: 1px solid #2A2520; /* Trennlinien */
  --border-active: 2px solid #F0B24A; /* Aktive Karte/Phase */
  --border-ok: 2px solid #74D19B; /* Freigegeben, grün */
  --border-placeholder: 1px dashed #4A4035; /* Platzhalter / noch offen */

  /* ---- shadow ---- */
  --shadow-lift: 0px 24px 60px 0px rgba(0, 0, 0, 0.55); /* Schwebendes Element – Drehbuch als Buch (A5), Dialoge */
  --shadow-gold-glow: 0px 0px 12px 0px #F0B24A; /* Leuchtpunkt im Lauflicht (Website) */

  /* ---- motion ---- */
  --motion-duration-fast: 120ms; /* Hover, Fokus, Farbwechsel */
  --motion-duration-base: 200ms; /* Aufklappen, Ein-/Ausblenden */
  --motion-duration-slow: 400ms; /* Seitenwechsel, große Flächen, Vorhang */
  --motion-duration-marquee: 38s; /* Ein Durchlauf des Lauflichts (Website) */
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /* Standard für fast alles */
  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1); /* Elemente erscheinen */
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1); /* Elemente verschwinden */
  --motion-easing-linear: cubic-bezier(0, 0, 1, 1); /* Lauflicht, Fortschritt */

  /* ---- logo ---- */
  --logo-mark-min-perforation: 40px; /* Bildmarke mit Perforation ab dieser Breite */
  --logo-mark-min: 24px; /* Bildmarke ohne Perforation ab dieser Breite; darunter nur der Stern (Favicon) */
  --logo-star-min: 16px; /* Stern allein (Favicon) ab dieser Breite */
  --logo-wordmark-min: 16px; /* Kleinste Schriftgröße der Wortmarke (digital) */
  --logo-horizontal-min: 120px; /* Kleinste Breite des horizontalen Logos (digital) */
  --logo-mark-ratio: 1.66; /* Breite der Bildmarke = 1,66 × Schriftgröße der Wortmarke */
  --logo-gap-ratio: 0.33; /* Abstand Bildmarke ↔ Wortmarke und Wortmarke ↔ Zusatz = ⅓ der Schriftgröße */
  --logo-suffix-ratio: 0.5; /* Zusatz neben der Wortmarke („HQ“) = ½ der Wortmarken-Schriftgröße */
  --logo-suffix-min: 12px; /* Kleinste Schriftgröße des Zusatzes */
  --logo-clearspace-ratio: 0.5; /* Schutzzone auf allen Seiten = ½ Höhe der Bildmarke */
  --logo-app-icon-radius-ratio: 0.224; /* Eckenradius des App-Icons = 22,4 % der Kantenlänge (iOS rundet selbst ab) */

  /* ---- social ---- */
  --social-square-width: 1080px;
  --social-square-height: 1080px;
  --social-square-safe-top: 80px;
  --social-square-safe-bottom: 80px;
  --social-square-safe-x: 80px;
  --social-story-width: 1080px;
  --social-story-height: 1920px;
  --social-story-safe-top: 250px;
  --social-story-safe-bottom: 340px;
  --social-story-safe-x: 64px;
  --social-link-width: 1200px;
  --social-link-height: 630px;
  --social-link-safe-top: 40px;
  --social-link-safe-bottom: 40px;
  --social-link-safe-x: 60px;
}