{
  "$description": "moviefriends Design-Tokens · Stil A „Kinosaal“. Einzige Quelle der Wahrheit für Website, Studio, HQ, Brand-Seite und die spätere iPhone-/iPad-App. Format: W3C Design Tokens (DTCG). Daraus generiert (pnpm tokens:build): dist/tokens.css, dist/tailwind-theme.css, dist/tokens.ts, dist/tokens.swift. Online: https://brand.moviefriends.app/tokens.json · Regeln: https://brand.moviefriends.app/design-system.md",
  "color": {
    "$type": "color",
    "$description": "Farben. Dunkler Kinosaal, Kinogold nur für Licht und Handlung (Akzent, Hauptaktion, aktive Zustände).",
    "bg": { "$value": "#0F0D0B", "$description": "Nachtschwarz – Seitenhintergrund (Kinosaal)" },
    "surface": { "$value": "#1A1714", "$description": "Sitzreihe – Karten, Panels" },
    "surface-2": {
      "$value": "#241F1A",
      "$description": "Bühnenboden – erhöhte Flächen, Chips, Bildplatzhalter"
    },
    "surface-sunken": {
      "$value": "#15120F",
      "$description": "Eingelassene Flächen, z. B. Chat-Verlauf (A3)"
    },
    "line": {
      "$value": "#3A322A",
      "$description": "Holz – Standard-Rahmen von Karten, Buttons, Eingabefeldern"
    },
    "line-subtle": {
      "$value": "#2A2520",
      "$description": "Trennlinien, z. B. unter der Kopfzeile"
    },
    "line-strong": {
      "$value": "#4A4035",
      "$description": "Gestrichelte Platzhalter („Rolle hinzufügen“), Ränder von Farbfeldern"
    },
    "line-disabled": {
      "$value": "#6B5F50",
      "$description": "Gestrichelte Rahmen deaktivierter Aktionen"
    },
    "fg": {
      "$value": "#F3ECE2",
      "$description": "Elfenbein – Haupttext, Leinwand, „movie“ in der Wortmarke"
    },
    "fg-soft": {
      "$value": "#D9CFC1",
      "$description": "Heller Sekundärtext (Bildunterschriften, Fließtext in Karten)"
    },
    "fg-2": { "$value": "#C9BEAE", "$description": "Gedämpfter Text (Website, Navigation)" },
    "fg-muted": {
      "$value": "#B8AC9A",
      "$description": "Sekundärtext, Meta-Infos, inaktive Navigation (Screens)"
    },
    "fg-3": { "$value": "#A89C8A", "$description": "Notizen, Kleingedrucktes" },
    "gold": {
      "$value": "#F0B24A",
      "$description": "Kinogold – Akzent, Hauptbutton, aktive Zustände, Links, Fokusring, „friends“ in der Wortmarke"
    },
    "gold-hover": { "$value": "#FFD088", "$description": "Link-Hover" },
    "gold-button-hover": { "$value": "#F6C46A", "$description": "Hauptbutton Hover" },
    "gold-ink": { "$value": "#1C1405", "$description": "Text auf Gold" },
    "gold-tint": {
      "$value": "#3B2A12",
      "$description": "Gold getönte Fläche – eigene Sprechblasen, Avatar mit Goldrand"
    },
    "ok": { "$value": "#74D19B", "$description": "Grünes Licht – fertig, bestanden, Ampel „Grün“" },
    "ok-soft": { "$value": "#B9E8CB", "$description": "Text in grünen Chips" },
    "ok-surface": {
      "$value": "#1F3A2C",
      "$description": "Grüne Fläche (Kommentar-Marker, Status)"
    },
    "ok-surface-2": { "$value": "#16251C", "$description": "Grüne Karte „Gesamt: Grün“ (A4)" },
    "warn": {
      "$value": "#F2994A",
      "$description": "Hinweis/Warnung – Ampel „Gelb“, z. B. unscharfes Foto"
    },
    "warn-soft": { "$value": "#F2B98A", "$description": "Text auf Warn-Fläche" },
    "warn-surface": { "$value": "#2E1C12", "$description": "Warn-Fläche (Foto-Hinweis)" },
    "danger": { "$value": "#EF6F6C", "$description": "Fehler – Ampel „Rot“" },
    "danger-surface": { "$value": "#3A2424", "$description": "Rote Avatar-/Statusfläche" },
    "filmstrip": {
      "$value": "#2E2822",
      "$description": "Perforation im Produktions-Fortschrittsband (A2–A6)"
    },
    "paper": {
      "$description": "Drehbuch als Buch (A5): helle Buchseite im dunklen Studio",
      "bg": { "$value": "#EFE6D6", "$description": "Papier" },
      "bg-2": { "$value": "#E2D5BE", "$description": "Papier, Rand/Bildfläche" },
      "fold": { "$value": "#D8CBB4", "$description": "Eselsohr" },
      "ink": { "$value": "#2A2118", "$description": "Schrift auf Papier" },
      "ink-muted": { "$value": "#6E5D47", "$description": "Sekundärtext auf Papier" },
      "ink-gold": { "$value": "#8A5A12", "$description": "Gold-Überschrift auf Papier" }
    },
    "track": {
      "$description": "Spuren im Schnitt-Zeitstrahl (A6)",
      "1": { "$value": "#4E6A8C", "$description": "Spur 1" },
      "2": { "$value": "#6A4E8C", "$description": "Spur 2" },
      "3": { "$value": "#4E8C6A", "$description": "Spur 3" }
    },
    "brand": {
      "$description": "Logo-Farben (A7). Dunkler Grund: Stern und „friends“ Kinogold, Schweif und „movie“ Elfenbein, Perforation Nachtschwarz.",
      "star": {
        "$value": "{color.gold}",
        "$description": "Stern / „friends“ auf dunklem Grund"
      },
      "tail": {
        "$value": "{color.fg}",
        "$description": "Filmstreifen-Schweif / „movie“ auf dunklem Grund"
      },
      "star-on-light": { "$value": "#D8962A", "$description": "Stern auf hellem Grund" },
      "friends-on-light": { "$value": "#A86A10", "$description": "„friends“ auf hellem Grund" },
      "ink-on-light": {
        "$value": "#2A2118",
        "$description": "Schweif und „movie“ auf hellem Grund"
      },
      "light-bg": {
        "$value": "{color.fg}",
        "$description": "Heller Grund (Elfenbein), zugleich Perforation der hellen Variante"
      },
      "muted-on-light": { "$value": "#5C4E3D", "$description": "Sekundärtext auf hellem Grund" }
    },
    "overlay": {
      "$description": "Halbtransparentes Nachtschwarz",
      "caption": {
        "$value": "rgba(15, 13, 11, 0.78)",
        "$description": "Bild-Overlay für Labels auf Fotos"
      },
      "header": {
        "$value": "rgba(15, 13, 11, 0.92)",
        "$description": "Sticky-Kopfzeile (mit backdrop-filter: blur(8px))"
      }
    }
  },
  "font": {
    "$description": "Schriften: Big Shoulders für Überschriften, Zahlen und die Wortmarke; Instrument Sans für Text und UI. Selbst gehostet (keine Requests an Google Fonts).",
    "family": {
      "$type": "fontFamily",
      "display": {
        "$value": ["Big Shoulders", "Arial Narrow", "Roboto Condensed", "sans-serif"],
        "$description": "Überschriften, Wortmarke, große Zahlen – Überschriften in Versalien, die Wortmarke immer klein"
      },
      "body": {
        "$value": ["Instrument Sans", "Segoe UI", "system-ui", "-apple-system", "sans-serif"],
        "$description": "Fließtext, UI"
      }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": { "$value": 400, "$description": "Instrument Sans – Fließtext" },
      "medium": { "$value": 500, "$description": "Instrument Sans – Navigation" },
      "semibold": {
        "$value": 600,
        "$description": "Instrument Sans – Labels; Big Shoulders klein"
      },
      "bold": {
        "$value": 700,
        "$description": "Instrument Sans – Buttons; Big Shoulders – Abschnittstitel"
      },
      "extrabold": { "$value": 800, "$description": "Big Shoulders – Headlines, Wortmarke" }
    },
    "size": {
      "$type": "dimension",
      "2xs": { "$value": "11px", "$description": "Winzige Labels (Zeitstrahl)" },
      "xs": { "$value": "12px", "$description": "Versal-Labels (Eyebrow), Badges" },
      "sm": { "$value": "13px", "$description": "Kleingedrucktes, Chips" },
      "ui": { "$value": "14px", "$description": "Häufigste UI-Größe (Meta, Chips, Tabs)" },
      "md": { "$value": "15px", "$description": "Navigation" },
      "base": { "$value": "16px", "$description": "Grundschrift App" },
      "body-web": { "$value": "17px", "$description": "Grundschrift Website" },
      "lg": { "$value": "18px", "$description": "Hervorgehobener Text" },
      "lead-web": { "$value": "19px", "$description": "Lead-Absatz Website" },
      "xl": { "$value": "20px", "$description": "Big Shoulders 700: Karten-/Phasentitel" },
      "2xl": { "$value": "28px", "$description": "Big Shoulders 800: Panel-Titel" },
      "3xl": { "$value": "34px", "$description": "Big Shoulders 700: Abschnittstitel (H2)" },
      "4xl": { "$value": "40px", "$description": "Big Shoulders 800: Seitentitel mobil" },
      "5xl": { "$value": "56px", "$description": "Big Shoulders 800: große Headline" },
      "6xl": { "$value": "72px", "$description": "Big Shoulders 800: Seiten-Headline (H1, A1)" },
      "logo-header": { "$value": "30px", "$description": "Wortmarke in der Kopfzeile" },
      "logo-board": { "$value": "150px", "$description": "Wortmarke auf dem Logo-Board (A7)" }
    },
    "line-height": {
      "$type": "number",
      "display": { "$value": 0.95, "$description": "Headlines (0,9–1,0)" },
      "tight": { "$value": 1.1, "$description": "Kurze Titel, Zahlen" },
      "body": { "$value": 1.5, "$description": "Fließtext App" },
      "body-web": { "$value": 1.6, "$description": "Fließtext Website" }
    },
    "letter-spacing": {
      "$type": "dimension",
      "eyebrow": {
        "$value": "0.14em",
        "$description": "Versal-Labels 12 px, z. B. „STUDIO-LOBBY“, „02 · LÄUFT“; auch der Zusatz neben der Wortmarke („HQ“)"
      },
      "eyebrow-wide": { "$value": "0.2em", "$description": "Weite Versal-Labels 13–14 px" },
      "heading": { "$value": "0.03em", "$description": "Big Shoulders H2" },
      "display": { "$value": "0.01em", "$description": "Big Shoulders H1, Wortmarke" }
    }
  },
  "typography": {
    "$type": "typography",
    "$description": "Zusammengesetzte Textstile (Schrift, Größe, Schnitt, Zeilenhöhe, Laufweite)",
    "wordmark": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{font.size.logo-header}",
        "fontWeight": "{font.weight.extrabold}",
        "lineHeight": 1,
        "letterSpacing": "{font.letter-spacing.display}"
      },
      "$description": "Wortmarke „moviefriends“ – immer klein, „movie“ Elfenbein, „friends“ Kinogold"
    },
    "wordmark-suffix": {
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": "15px",
        "fontWeight": "{font.weight.semibold}",
        "lineHeight": 1,
        "letterSpacing": "{font.letter-spacing.eyebrow}"
      },
      "$description": "Zusatz neben der Wortmarke („HQ“, „Brand“): Versalien, Elfenbein, halbe Wortmarken-Größe"
    },
    "display": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{font.size.6xl}",
        "fontWeight": "{font.weight.extrabold}",
        "lineHeight": "{font.line-height.display}",
        "letterSpacing": "{font.letter-spacing.display}"
      },
      "$description": "Seiten-Headline (H1), Versalien"
    },
    "heading": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{font.size.3xl}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": "{font.line-height.tight}",
        "letterSpacing": "{font.letter-spacing.heading}"
      },
      "$description": "Abschnittstitel (H2), Versalien"
    },
    "title": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{font.size.xl}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": "{font.line-height.tight}",
        "letterSpacing": "{font.letter-spacing.heading}"
      },
      "$description": "Karten- und Phasentitel (H3), Versalien"
    },
    "eyebrow": {
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": "{font.size.xs}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": "{font.line-height.tight}",
        "letterSpacing": "{font.letter-spacing.eyebrow}"
      },
      "$description": "Versal-Label über Überschriften („02 · LÄUFT“)"
    },
    "body": {
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": "{font.size.base}",
        "fontWeight": "{font.weight.regular}",
        "lineHeight": "{font.line-height.body}",
        "letterSpacing": "0em"
      },
      "$description": "Fließtext App"
    },
    "body-web": {
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": "{font.size.body-web}",
        "fontWeight": "{font.weight.regular}",
        "lineHeight": "{font.line-height.body-web}",
        "letterSpacing": "0em"
      },
      "$description": "Fließtext Website"
    },
    "ui": {
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": "{font.size.ui}",
        "fontWeight": "{font.weight.medium}",
        "lineHeight": "{font.line-height.body}",
        "letterSpacing": "0em"
      },
      "$description": "UI-Text: Meta, Chips, Tabs"
    },
    "button": {
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": "{font.size.base}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": 1,
        "letterSpacing": "0em"
      },
      "$description": "Beschriftung von Buttons"
    }
  },
  "space": {
    "$type": "dimension",
    "$description": "Abstände im 4-px-Raster (entspricht der Tailwind-Standardskala: p-1 = 4 px, p-1.5 = 6 px …)",
    "1": { "$value": "4px" },
    "1.5": { "$value": "6px" },
    "2": { "$value": "8px" },
    "2.5": { "$value": "10px" },
    "3": { "$value": "12px" },
    "3.5": { "$value": "14px" },
    "4": { "$value": "16px", "$description": "Seitenrand mobil" },
    "5": { "$value": "20px" },
    "6": { "$value": "24px", "$description": "Innenabstand Karten" },
    "8": { "$value": "32px", "$description": "Seitenrand Screens" },
    "10": { "$value": "40px" },
    "14": { "$value": "56px", "$description": "Abstand zwischen Abschnitten" }
  },
  "radius": {
    "$type": "dimension",
    "$description": "Eckenradien – eher knapp, wie Kinokarten und Leinwände",
    "xs": { "$value": "3px", "$description": "Fortschrittsbalken, Zeitstrahl-Clips" },
    "sm": { "$value": "4px", "$description": "Thumbnails, kleine Flächen, Sprechblasen-Spitze" },
    "md": { "$value": "6px", "$description": "Buttons, Eingabefelder, Bilder" },
    "lg": { "$value": "8px", "$description": "Listen-Karten, Chat-Eingabe, Farbfelder" },
    "xl": { "$value": "10px", "$description": "Karten und Panels" },
    "bubble": {
      "$value": "14px",
      "$description": "Sprechblasen; die Ecke zum Absender hat radius.sm (Leo: oben links, eigene: oben rechts)"
    },
    "pill": { "$value": "999px", "$description": "Chips, Avatare, Badges, runde Buttons" }
  },
  "size": {
    "$type": "dimension",
    "$description": "Feste Größen für Bedienelemente und Layout",
    "control-sm": { "$value": "36px", "$description": "Kleiner Button/Chip" },
    "control": { "$value": "40px", "$description": "Standard-Button/Chip-Höhe" },
    "touch": { "$value": "44px", "$description": "Mindest-Klickfläche, Avatar" },
    "control-lg": { "$value": "48px", "$description": "Großer Button, Eingabefeld" },
    "button-web": { "$value": "50px", "$description": "Website-CTA" },
    "focus-ring": { "$value": "2px", "$description": "Breite des Fokusrings (Kinogold)" },
    "focus-offset": { "$value": "2px", "$description": "Abstand des Fokusrings (Website: 3 px)" },
    "content-max": { "$value": "1360px", "$description": "Max. Inhaltsbreite App" },
    "content-max-web": { "$value": "1200px", "$description": "Max. Inhaltsbreite Website" },
    "screen-width": { "$value": "1440px", "$description": "Entwurfsbreite Desktop" },
    "screen-width-mobile": { "$value": "390px", "$description": "Kleinste unterstützte Breite" }
  },
  "border": {
    "$type": "border",
    "$description": "Rahmen",
    "default": {
      "$value": { "color": "{color.line}", "width": "1px", "style": "solid" },
      "$description": "Karten, Buttons, Felder"
    },
    "subtle": {
      "$value": { "color": "{color.line-subtle}", "width": "1px", "style": "solid" },
      "$description": "Trennlinien"
    },
    "active": {
      "$value": { "color": "{color.gold}", "width": "2px", "style": "solid" },
      "$description": "Aktive Karte/Phase"
    },
    "ok": {
      "$value": { "color": "{color.ok}", "width": "2px", "style": "solid" },
      "$description": "Freigegeben, grün"
    },
    "placeholder": {
      "$value": { "color": "{color.line-strong}", "width": "1px", "style": "dashed" },
      "$description": "Platzhalter / noch offen"
    }
  },
  "shadow": {
    "$type": "shadow",
    "$description": "Schatten – sparsam; Tiefe entsteht vor allem über Flächenfarben",
    "lift": {
      "$value": {
        "color": "rgba(0, 0, 0, 0.55)",
        "offsetX": "0px",
        "offsetY": "24px",
        "blur": "60px",
        "spread": "0px"
      },
      "$description": "Schwebendes Element – Drehbuch als Buch (A5), Dialoge"
    },
    "gold-glow": {
      "$value": {
        "color": "{color.gold}",
        "offsetX": "0px",
        "offsetY": "0px",
        "blur": "12px",
        "spread": "0px"
      },
      "$description": "Leuchtpunkt im Lauflicht (Website)"
    }
  },
  "motion": {
    "$description": "Bewegung – ruhig, wie ein Vorhang. Bei prefers-reduced-motion: reduce alle Animationen aus, Übergänge höchstens 1 ms.",
    "duration": {
      "$type": "duration",
      "fast": { "$value": "120ms", "$description": "Hover, Fokus, Farbwechsel" },
      "base": { "$value": "200ms", "$description": "Aufklappen, Ein-/Ausblenden" },
      "slow": { "$value": "400ms", "$description": "Seitenwechsel, große Flächen, Vorhang" },
      "marquee": { "$value": "38s", "$description": "Ein Durchlauf des Lauflichts (Website)" }
    },
    "easing": {
      "$type": "cubicBezier",
      "standard": { "$value": [0.2, 0, 0, 1], "$description": "Standard für fast alles" },
      "enter": { "$value": [0, 0, 0.2, 1], "$description": "Elemente erscheinen" },
      "exit": { "$value": [0.4, 0, 1, 1], "$description": "Elemente verschwinden" },
      "linear": { "$value": [0, 0, 1, 1], "$description": "Lauflicht, Fortschritt" }
    }
  },
  "logo": {
    "$type": "dimension",
    "$description": "Regeln für Bildmarke „Filmstern“ und Wortmarke (Details: design-system.md, Abschnitt Logo)",
    "mark-min-perforation": {
      "$value": "40px",
      "$description": "Bildmarke mit Perforation ab dieser Breite"
    },
    "mark-min": {
      "$value": "24px",
      "$description": "Bildmarke ohne Perforation ab dieser Breite; darunter nur der Stern (Favicon)"
    },
    "star-min": { "$value": "16px", "$description": "Stern allein (Favicon) ab dieser Breite" },
    "wordmark-min": {
      "$value": "16px",
      "$description": "Kleinste Schriftgröße der Wortmarke (digital)"
    },
    "horizontal-min": {
      "$value": "120px",
      "$description": "Kleinste Breite des horizontalen Logos (digital)"
    },
    "mark-ratio": {
      "$type": "number",
      "$value": 1.66,
      "$description": "Breite der Bildmarke = 1,66 × Schriftgröße der Wortmarke"
    },
    "gap-ratio": {
      "$type": "number",
      "$value": 0.33,
      "$description": "Abstand Bildmarke ↔ Wortmarke und Wortmarke ↔ Zusatz = ⅓ der Schriftgröße"
    },
    "suffix-ratio": {
      "$type": "number",
      "$value": 0.5,
      "$description": "Zusatz neben der Wortmarke („HQ“) = ½ der Wortmarken-Schriftgröße"
    },
    "suffix-min": {
      "$value": "12px",
      "$description": "Kleinste Schriftgröße des Zusatzes"
    },
    "clearspace-ratio": {
      "$type": "number",
      "$value": 0.5,
      "$description": "Schutzzone auf allen Seiten = ½ Höhe der Bildmarke"
    },
    "app-icon-radius-ratio": {
      "$type": "number",
      "$value": 0.224,
      "$description": "Eckenradius des App-Icons = 22,4 % der Kantenlänge (iOS rundet selbst ab)"
    }
  },
  "social": {
    "$type": "dimension",
    "$description": "Social-Media-Formate mit Sicherheitsbereichen (Grundlage für Vorlagen). Wichtige Inhalte – Logo, Text, Gesichter – nur innerhalb des Sicherheitsbereichs.",
    "square": {
      "$description": "Beitrag quadratisch 1:1 (Instagram, Facebook, LinkedIn)",
      "width": { "$value": "1080px" },
      "height": { "$value": "1080px" },
      "safe-top": { "$value": "80px" },
      "safe-bottom": { "$value": "80px" },
      "safe-x": { "$value": "80px" }
    },
    "story": {
      "$description": "Story/Reel/Short 9:16 (Instagram, TikTok, YouTube Shorts) – oben Profilzeile, unten Antwortfeld und Bedienelemente",
      "width": { "$value": "1080px" },
      "height": { "$value": "1920px" },
      "safe-top": { "$value": "250px" },
      "safe-bottom": { "$value": "340px" },
      "safe-x": { "$value": "64px" }
    },
    "link": {
      "$description": "Link-Vorschau 1,91:1 (Open Graph, X, LinkedIn, Messenger) – manche Dienste schneiden quadratisch aus der Mitte",
      "width": { "$value": "1200px" },
      "height": { "$value": "630px" },
      "safe-top": { "$value": "40px" },
      "safe-bottom": { "$value": "40px" },
      "safe-x": { "$value": "60px" }
    }
  }
}