{
  "$description": "Miragon Design Tokens: die maschinenlesbare Quelle der Wahrheit der Marke, für den hellen und den dunklen Modus (Dark Mode). Palette (color), Statusfarben (functional) und UI-Ebene (ui) sind fest, die Rollen (rolle, --cd-ui-*) schalten mit dem Modus um, die dunklen Neutralen (neutral) erreichst du nur über die Rollen. Aus dieser Datei werden die CSS-Variablen für die Doku (docs/.vitepress/theme/tokens.generated.css) und für Apps und Webseiten (brand/cd-tokens.generated.css), die Rollen als JSON (brand/cd-tokens.generated.json), die Rollen-Klassen für den Canvas (brand/cd-canvas.generated.css), das Kontrast-Datenblatt beider Modi (brand/contrast.generated.json) und die gebündelten Skill-Assets erzeugt (npm run tokens:build). Wert hier einmal ändern, alles andere zieht nach. Format lehnt sich an das W3C Design Tokens Community Group Format an; Gradienten nutzen bewusst rohe CSS-Strings ($extensions.com.miragon), damit sie direkt einsetzbar sind.",
  "color": {
    "$description": "Markenpalette. Blau führt, Grün akzentuiert, der Rest sind Neutrale.",
    "blau": {
      "$value": "#335DE5",
      "$type": "color",
      "$description": "Primärfarbe: Flächen, Buttons, Links, Hintergründe.",
      "$extensions": {
        "com.miragon": { "css": "--cd-blau", "rgb": "51 93 229", "pantone": "2725 / 2986 C", "role": "primary" }
      }
    },
    "gruen": {
      "$value": "#00E676",
      "$type": "color",
      "$description": "Akzent: Key Visual, Highlights, ein hervorgehobenes Wort. Nicht als Fließtext auf Weiß (unter WCAG AA).",
      "$extensions": {
        "com.miragon": { "css": "--cd-gruen", "rgb": "0 230 118", "pantone": "3285 / 7479 C", "role": "accent" }
      }
    },
    "grau": {
      "$value": "#F9F7F7",
      "$type": "color",
      "$description": "Ruhige, neutrale Hintergrundfläche.",
      "$extensions": {
        "com.miragon": { "css": "--cd-grau", "rgb": "249 247 247", "role": "surface" }
      }
    },
    "schwarz": {
      "$value": "#1D1D1D",
      "$type": "color",
      "$description": "Text auf Hell, monochrome Logo-Variante und die einzige dunkle Farbe: Grund im Dark Mode und hinter dem Mesh-Hero, dunkle Abschnitte, Overlays und Dialog-Backdrops (mit Deckkraft). Höhere dunkle Stufen sind Weiß in Schwarz gemischt (neutral.*). Kein reines Schwarz, kein Dunkelblau.",
      "$extensions": {
        "com.miragon": { "css": "--cd-schwarz", "rgb": "29 29 29", "role": "text" }
      }
    },
    "weiss": {
      "$value": "#FFFFFF",
      "$type": "color",
      "$description": "Text auf Farbe, Flächen.",
      "$extensions": {
        "com.miragon": { "css": "--cd-weiss", "rgb": "255 255 255", "role": "surface" }
      }
    },
    "blau-link": {
      "$value": "#2B50D4",
      "$type": "color",
      "$description": "Etwas tieferes Blau für Links, Akzenttext und Fokus auf Weiß, erreicht sicheren WCAG-AA-Kontrast. Abgeleitet aus blau. Nur auf Hell, auf Schwarz 2,57:1. Im Dark Mode sind Links Grün (rolle.link).",
      "$extensions": {
        "com.miragon": { "css": "--cd-blau-link", "role": "interaction" }
      }
    },
    "blau-hell": {
      "$value": "#6B8AFF",
      "$type": "color",
      "$description": "Aufgehelltes Blau für Fokus und Auswahl auf dunklem Grund und im Dark Mode (rolle.fokus, rolle.interaktion): Fokusrahmen, Auswahl, aktiver Indikator, Flow-Kante. Nie Fläche. Links und Akzenttext auf dunklem Grund und im Dark Mode sind Grün.",
      "$extensions": {
        "com.miragon": { "css": "--cd-blau-hell", "role": "interaction-dark" }
      }
    }
  },
  "functional": {
    "$description": "Statusfarben, eine eigene funktionale Ebene NEBEN der Markenpalette. Nur für Zustände (Erfolg, Warnung, Fehler, Hinweis) in UI und Diagrammen, nicht als Gestaltungsfarbe. Erfolg und Hinweis sind die Markenfarben (Grün und Blau). Für Warnung und Fehler hat die Marke keine Farbe, deshalb Amber, so hell wie das Grün, und Rot, so kräftig wie das Blau. Jeder Status hat drei Werte: Die Statusfarbe (success, warning, danger, info) ist Fläche, Rand, Icon und Statuspunkt, Schrift darauf Schwarz (Grün, Amber) oder Weiß (Rot, Blau). Als Text auf hellem Grund taugen nur Rot und Blau, Text zu Grün und Amber ist Schwarz. -soft ist die Tönung für Hinweis-Kästen und Badges auf hellem Grund, Text darauf Schwarz. -hell ist Text, Icon und Rand auf Schwarz und im Dark Mode; dunkle Flächen bleiben neutral (Schwarz oder neutral.*), ohne farbige Tönung. In Komponenten nimmst du die Rollen rolle.success bis rolle.info und rolle.*-flaeche (--cd-ui-*), sie wählen je Modus den passenden Wert. Grün und Amber erreichen auf Weiß keine 3:1, ein Status steht deshalb nie als Farbe allein, sondern immer mit Text oder Icon.",
    "success": { "$value": "#00E676", "$type": "color", "$description": "Erfolg, Bestätigung: das Marken-Grün. Fläche, Rand, Icon und Statuspunkt, Schrift darauf Schwarz. Auf Weiß nur 1,67:1, also nie Text auf hellem Grund und nie Farbe allein.", "$extensions": { "com.miragon": { "css": "--cd-success" } } },
    "success-soft": { "$value": "#DAFBEB", "$type": "color", "$description": "Tönung für Hinweis-Kästen und Badges auf hellem Grund. Text darauf Schwarz, Rand und Icon in der Statusfarbe.", "$extensions": { "com.miragon": { "css": "--cd-success-soft" } } },
    "success-hell": { "$value": "#00E676", "$type": "color", "$description": "Text, Icon und Rand für Erfolg auf Schwarz und im Dark Mode, gleich dem Marken-Grün.", "$extensions": { "com.miragon": { "css": "--cd-success-hell" } } },
    "warning": { "$value": "#FFB000", "$type": "color", "$description": "Warnung, Achtung: Amber, so hell wie das Marken-Grün. Fläche, Rand, Icon und Statuspunkt, Schrift darauf Schwarz. Auf Weiß nur 1,83:1, also nie Text auf hellem Grund und nie Farbe allein.", "$extensions": { "com.miragon": { "css": "--cd-warning" } } },
    "warning-soft": { "$value": "#FFF1D2", "$type": "color", "$description": "Tönung für Hinweis-Kästen und Badges auf hellem Grund. Text darauf Schwarz, Rand und Icon in der Statusfarbe.", "$extensions": { "com.miragon": { "css": "--cd-warning-soft" } } },
    "warning-hell": { "$value": "#FFB000", "$type": "color", "$description": "Text, Icon und Rand für Warnung auf Schwarz und im Dark Mode, gleich der Statusfarbe.", "$extensions": { "com.miragon": { "css": "--cd-warning-hell" } } },
    "danger": { "$value": "#CD1839", "$type": "color", "$description": "Fehler, Gefahr, destruktive Aktion: ein kräftiges, leicht kühles Rot, so tief wie das Marken-Blau. Fläche mit weißer Schrift, Rand und Icon. Als Text auf Weiß AA, etwa für eine Fehlermeldung unter einem Feld.", "$extensions": { "com.miragon": { "css": "--cd-danger" } } },
    "danger-soft": { "$value": "#FBEEF0", "$type": "color", "$description": "Tönung für Hinweis-Kästen und Badges auf hellem Grund. Text darauf Schwarz, Rand und Icon in der Statusfarbe.", "$extensions": { "com.miragon": { "css": "--cd-danger-soft" } } },
    "danger-hell": { "$value": "#FB6D73", "$type": "color", "$description": "Text, Icon und Rand für Fehler auf Schwarz und im Dark Mode.", "$extensions": { "com.miragon": { "css": "--cd-danger-hell" } } },
    "info": { "$value": "#335DE5", "$type": "color", "$description": "Hinweis, neutrale Information: das Marken-Blau. Fläche mit weißer Schrift, Rand und Icon. Als Text auf Weiß AA.", "$extensions": { "com.miragon": { "css": "--cd-info" } } },
    "info-soft": { "$value": "#EEF1FD", "$type": "color", "$description": "Tönung für Hinweis-Kästen und Badges auf hellem Grund. Text darauf Schwarz, Rand und Icon in der Statusfarbe.", "$extensions": { "com.miragon": { "css": "--cd-info-soft" } } },
    "info-hell": { "$value": "#6B8AFF", "$type": "color", "$description": "Text, Icon und Rand für Hinweise auf Schwarz und im Dark Mode, gleich blau-hell.", "$extensions": { "com.miragon": { "css": "--cd-info-hell" } } }
  },
  "ui": {
    "$description": "UI-Ebene: feste helle Neutrale. In Komponenten (Doku, Modeler, Apps, Webseiten) nimmst du die Rollen (rolle.*, --cd-ui-*), die im Dark Mode umschalten. ui.* direkt nur auf festen hellen Bühnen. Wie die Statusfarben eine eigene Ebene NEBEN der Markenpalette, keine Gestaltungsfarben für Marketing. Die Grautöne sind leicht warm, passend zu grau #F9F7F7.",
    "linie": { "$value": "#E6E2E2", "$type": "color", "$description": "Trennlinien und dekorative Rahmen. Kein Kontrastanspruch, nie für Text oder bedeutungstragende Kanten.", "$extensions": { "com.miragon": { "css": "--cd-linie" } } },
    "kontur": { "$value": "#8F8A8A", "$type": "color", "$description": "Nicht-Text-Elemente, die erkennbar sein müssen (Eingabe-Rahmen, Kanten, Abhängigkeitslinien). Mindestens 3:1 auf Weiß und Grau.", "$extensions": { "com.miragon": { "css": "--cd-kontur" } } },
    "text-leise": { "$value": "#6B6666", "$type": "color", "$description": "Sekundärer Text (Hinweise, Metadaten). Mindestens 4,5:1 auf Weiß und Grau.", "$extensions": { "com.miragon": { "css": "--cd-text-leise" } } }
  },
  "neutral": {
    "$description": "Dunkle Neutrale für den Dark Mode. Nur über rolle.* verwenden, keine eigene CSS-Variable. Jeder Wert ist Weiß in Schwarz gemischt: Kanal = round(29 + 226 × mix), also R = G = B ohne Farbton.",
    "05": { "$value": "#282828", "$type": "color", "$description": "5 % Weiß: Fläche (Panel, Karte, Seitenleiste, graue Sektion) und dunkle Status-Fläche.", "$extensions": { "com.miragon": { "mix": 0.05 } } },
    "08": { "$value": "#2F2F2F", "$type": "color", "$description": "8 % Weiß: schwebende Fläche (Menü, Dialog, Palette, Toast, Tooltip).", "$extensions": { "com.miragon": { "mix": 0.08 } } },
    "12": { "$value": "#383838", "$type": "color", "$description": "12 % Weiß: Hover, gewählter Eintrag und Icon-Kachel.", "$extensions": { "com.miragon": { "mix": 0.12 } } },
    "18": { "$value": "#464646", "$type": "color", "$description": "18 % Weiß: Linie, dekorativ. Trenner und Rand jeder dunklen Fläche.", "$extensions": { "com.miragon": { "mix": 0.18 } } },
    "70": { "$value": "#BBBBBB", "$type": "color", "$description": "70 % Weiß: leiser Text, mindestens 4,5:1 auf allen dunklen Stufen.", "$extensions": { "com.miragon": { "mix": 0.70 } } }
  },
  "rolle": {
    "$description": "Rollen für gebaute Oberflächen (Apps, Modeler, Webseiten, Doku) in Hell und Dunkel. $value ist der Hell-Wert, dunkel der Wert im Dark Mode, von nennt die Quell-Tokens (hell, dunkel). Nur diese Variablen (--cd-ui-*) schalten mit data-cd-theme um, Palette, Statusfarben und ui.* bleiben fest. Apps liegen auf grund, Webseiten und die Doku auf den Seitenrollen seite und abschnitt. Dunkel gelten die Werte nur auf dem Bildschirm, gedruckt wird hell. art steuert die Prüfungen: flaeche (dunkel R = G = B), text (4,5:1), nicht-text (3:1), deko, status, overlay (Schwarz mit Deckkraft), logo, zahl. hochkontrast nennt die Rolle, deren Wert im selben Modus bei data-cd-kontrast hoch gilt. textAuf nennt je Modus die Flächen, auf denen ein Status als Text stehen darf.",
    "grund": { "$value": "#F9F7F7", "$type": "color", "$description": "App-Grund, Canvas-Umgebung mit Punktraster, eingelassene Eingabefelder. Dunkel Schwarz, nichts ist dunkler.", "$extensions": { "com.miragon": { "css": "--cd-ui-grund", "dunkel": "#1D1D1D", "von": ["color.grau", "color.schwarz"], "art": "flaeche" } } },
    "flaeche": { "$value": "#FFFFFF", "$type": "color", "$description": "Angedocktes Panel, Seitenleiste, Karte. Jede Fläche über dem Grund hat 1px Rand in rolle.linie.", "$extensions": { "com.miragon": { "css": "--cd-ui-flaeche", "dunkel": "#282828", "von": ["color.weiss", "neutral.05"], "art": "flaeche" } } },
    "flaeche-hoch": { "$value": "#FFFFFF", "$type": "color", "$description": "Schwebende Fläche: Menü, Palette, Context-Pad, Eigenschaften, Popover, Dialog, Toast, Tooltip.", "$extensions": { "com.miragon": { "css": "--cd-ui-flaeche-hoch", "dunkel": "#2F2F2F", "von": ["color.weiss", "neutral.08"], "art": "flaeche" } } },
    "hover": { "$value": "#EEF1FD", "$type": "color", "$description": "Hover, gedrückter und gewählter Eintrag, aktives Werkzeug, Drop-Zone. Hell Blau-soft wie bisher, dunkel neutral.", "$extensions": { "com.miragon": { "css": "--cd-ui-hover", "dunkel": "#383838", "von": ["functional.info-soft", "neutral.12"], "art": "flaeche" } } },
    "plot": { "$value": "#FFFFFF", "$type": "color", "$description": "Zeichenfläche: Plot, Standardfüllung der Elemente, Label-Halo. Dunkel Schwarz wie die Umgebung, Exporte bleiben hell.", "$extensions": { "com.miragon": { "css": "--cd-ui-plot", "dunkel": "#1D1D1D", "von": ["color.weiss", "color.schwarz"], "art": "flaeche" } } },
    "seite": { "$value": "#FFFFFF", "$type": "color", "$description": "Seitenrolle für Webseiten und die Doku: Seitengrund (html, body), weiße Sektion, Navigation, Eingabefeld auf Webseiten. Dunkel Schwarz wie rolle.grund.", "$extensions": { "com.miragon": { "css": "--cd-ui-seite", "dunkel": "#1D1D1D", "von": ["color.weiss", "color.schwarz"], "art": "flaeche" } } },
    "abschnitt": { "$value": "#F9F7F7", "$type": "color", "$description": "Seitenrolle für Webseiten und die Doku: graue Sektion, Codeblock, Tabellenkopf, Zitat, Seitenleiste der Doku. Dunkel 5 % wie rolle.flaeche, nie rolle.flaeche-hoch unter Code.", "$extensions": { "com.miragon": { "css": "--cd-ui-abschnitt", "dunkel": "#282828", "von": ["color.grau", "neutral.05"], "art": "flaeche" } } },
    "linie": { "$value": "#E6E2E2", "$type": "color", "$description": "Trennlinien, Rahmen schwebender Flächen, Plotrand, Hilfslinien, Punktraster. Dekorativ, trägt dunkel die Höhe.", "$extensions": { "com.miragon": { "css": "--cd-ui-linie", "dunkel": "#464646", "von": ["ui.linie", "neutral.18"], "art": "deko", "hochkontrast": "rolle.kontur" } } },
    "kontur": { "$value": "#8F8A8A", "$type": "color", "$description": "Eingaberahmen, Checkbox, Achsen, Kanten, Abhängigkeiten, Unterleger unter schwachen Fremdstrichen. In beiden Modi gleich.", "$extensions": { "com.miragon": { "css": "--cd-ui-kontur", "dunkel": "#8F8A8A", "von": ["ui.kontur", "ui.kontur"], "art": "nicht-text", "hochkontrast": "rolle.text" } } },
    "text": { "$value": "#1D1D1D", "$type": "color", "$description": "Text, Standard-Icons (currentColor), Elementkontur und Beschriftung auf dem Canvas.", "$extensions": { "com.miragon": { "css": "--cd-ui-text", "dunkel": "#FFFFFF", "von": ["color.schwarz", "color.weiss"], "art": "text" } } },
    "text-leise": { "$value": "#6B6666", "$type": "color", "$description": "Sekundärer Text, Platzhalter, Tastenkürzel, Achsentext, deaktivierte Elemente.", "$extensions": { "com.miragon": { "css": "--cd-ui-text-leise", "dunkel": "#BBBBBB", "von": ["ui.text-leise", "neutral.70"], "art": "text", "hochkontrast": "rolle.text" } } },
    "link": { "$value": "#2B50D4", "$type": "color", "$description": "Links und Akzenttext, im Fließtext unterstrichen. Dunkel Grün.", "$extensions": { "com.miragon": { "css": "--cd-ui-link", "dunkel": "#00E676", "von": ["color.blau-link", "color.gruen"], "art": "text" } } },
    "icon-akzent": { "$value": "#335DE5", "$type": "color", "$description": "Lucide-Icon mit Akzent, höchstens eins je Reihe. Dunkel Grün.", "$extensions": { "com.miragon": { "css": "--cd-ui-icon-akzent", "dunkel": "#00E676", "von": ["color.blau", "color.gruen"], "art": "nicht-text" } } },
    "fokus": { "$value": "#2B50D4", "$type": "color", "$description": "Fokusrahmen 2px mit 2px Abstand an jedem interaktiven Element.", "$extensions": { "com.miragon": { "css": "--cd-ui-fokus", "dunkel": "#6B8AFF", "von": ["color.blau-link", "color.blau-hell"], "art": "nicht-text" } } },
    "interaktion": { "$value": "#335DE5", "$type": "color", "$description": "Auswahl, Hover-Kontur, aktiver Indikator, Haken der Checkbox, Lasso- und Griffrand, Flow-Kante. Nie Fläche, dunkel nie Text.", "$extensions": { "com.miragon": { "css": "--cd-ui-interaktion", "dunkel": "#6B8AFF", "von": ["color.blau", "color.blau-hell"], "art": "nicht-text" } } },
    "success": { "$value": "#00E676", "$type": "color", "$description": "Rand, Icon und Statuspunkt für Erfolg, dunkel auch Text. Hell nie Text und nie allein.", "$extensions": { "com.miragon": { "css": "--cd-ui-success", "dunkel": "#00E676", "von": ["functional.success", "functional.success-hell"], "art": "status", "textAuf": { "hell": [], "dunkel": ["grund", "flaeche", "flaeche-hoch", "hover", "seite", "abschnitt"] } } } },
    "warning": { "$value": "#FFB000", "$type": "color", "$description": "Rand, Icon und Statuspunkt für Warnung, dunkel auch Text. Hell nie Text und nie allein.", "$extensions": { "com.miragon": { "css": "--cd-ui-warning", "dunkel": "#FFB000", "von": ["functional.warning", "functional.warning-hell"], "art": "status", "textAuf": { "hell": [], "dunkel": ["grund", "flaeche", "flaeche-hoch", "hover", "seite", "abschnitt"] } } } },
    "danger": { "$value": "#CD1839", "$type": "color", "$description": "Rand, Icon, Statuspunkt und Fehlertext, Movement auf dem Canvas. Dunkel nicht als Text auf rolle.hover.", "$extensions": { "com.miragon": { "css": "--cd-ui-danger", "dunkel": "#FB6D73", "von": ["functional.danger", "functional.danger-hell"], "art": "status", "textAuf": { "hell": ["grund", "flaeche", "flaeche-hoch", "hover", "seite", "abschnitt"], "dunkel": ["grund", "flaeche", "flaeche-hoch", "seite", "abschnitt"] } } } },
    "info": { "$value": "#335DE5", "$type": "color", "$description": "Rand, Icon, Statuspunkt und Hinweistext. Dunkel als Text nur auf rolle.grund, rolle.flaeche und den Seitenrollen, nicht auf rolle.flaeche-hoch und rolle.hover.", "$extensions": { "com.miragon": { "css": "--cd-ui-info", "dunkel": "#6B8AFF", "von": ["functional.info", "functional.info-hell"], "art": "status", "textAuf": { "hell": ["grund", "flaeche", "flaeche-hoch", "hover", "seite", "abschnitt"], "dunkel": ["grund", "flaeche", "seite", "abschnitt"] } } } },
    "success-flaeche": { "$value": "#DAFBEB", "$type": "color", "$description": "Fläche von Status-Kasten und getöntem Badge für Erfolg. Dunkel ohne Tönung, den Status tragen Rand und Icon.", "$extensions": { "com.miragon": { "css": "--cd-ui-success-flaeche", "dunkel": "#282828", "von": ["functional.success-soft", "neutral.05"], "art": "flaeche" } } },
    "warning-flaeche": { "$value": "#FFF1D2", "$type": "color", "$description": "Wie success-flaeche, für Warnung.", "$extensions": { "com.miragon": { "css": "--cd-ui-warning-flaeche", "dunkel": "#282828", "von": ["functional.warning-soft", "neutral.05"], "art": "flaeche" } } },
    "danger-flaeche": { "$value": "#FBEEF0", "$type": "color", "$description": "Wie success-flaeche, für Fehler.", "$extensions": { "com.miragon": { "css": "--cd-ui-danger-flaeche", "dunkel": "#282828", "von": ["functional.danger-soft", "neutral.05"], "art": "flaeche" } } },
    "info-flaeche": { "$value": "#EEF1FD", "$type": "color", "$description": "Wie success-flaeche, für Hinweise.", "$extensions": { "com.miragon": { "css": "--cd-ui-info-flaeche", "dunkel": "#282828", "von": ["functional.info-soft", "neutral.05"], "art": "flaeche" } } },
    "wortmarke": { "$value": "#00E676", "$type": "color", "$description": "Wortmarke als Inline-SVG. Dunkel Weiß, Grün bleibt erlaubte Alternative.", "$extensions": { "com.miragon": { "css": "--cd-ui-wortmarke", "dunkel": "#FFFFFF", "von": ["color.gruen", "color.weiss"], "art": "logo" } } },
    "backdrop": { "$value": "rgba(29, 29, 29, 0.42)", "$type": "color", "$description": "Dialog-Backdrop, immer Schwarz mit Deckkraft und backdrop-filter: blur(3px) grayscale(1). Hell 42 %, dunkel 60 %.", "$extensions": { "com.miragon": { "css": "--cd-ui-backdrop", "dunkel": "rgba(29, 29, 29, 0.6)", "art": "overlay" } } },
    "chrome-deckkraft": { "$value": "84%", "$type": "other", "$description": "Deckkraft schwebender Karten über dem Canvas: hell Glas, dunkel und im Hochkontrast deckend.", "$extensions": { "com.miragon": { "css": "--cd-ui-chrome-deckkraft", "dunkel": "100%", "art": "zahl", "hochkontrast": "100%" } } }
  },
  "gradient": {
    "$description": "Verläufe als rohe CSS-Strings, direkt einsetzbar. Nimm genau diese Werte, bau sie nicht nach Gefühl nach.",
    "brand": {
      "$value": "linear-gradient(120deg, #335DE5 30%, #00E676)",
      "$type": "gradient",
      "$description": "Marken-Verlauf: Hero, große Flächen, Markenmomente.",
      "$extensions": {
        "com.miragon": { "css": "--cd-gradient-brand", "rawCss": true }
      }
    },
    "format": {
      "$value": "linear-gradient(135deg, #335DE5 0%, #00E676 140%)",
      "$type": "gradient",
      "$description": "Format-Verlauf: Social-Kacheln, Format-Platzhalter.",
      "$extensions": {
        "com.miragon": { "css": "--cd-gradient-format", "rawCss": true }
      }
    },
    "mesh-hero": {
      "$value": ["#335DE5", "#1D1D1D", "#00E676", "#335DE5", "#1D1D1D", "#00E676"],
      "$type": "gradient",
      "$description": "Animierter MeshGradient-Hintergrund der Startseite (Paper Design meshGradient). Nur Palettenfarben: Blau, Schwarz und Grün. Die Bewegung (Shader-Werte) folgt dem Hero von miragon.io. Nur für diesen Shader (HomePage.vue), nirgends sonst verwenden.",
      "$extensions": {
        "com.miragon": {
          "usage": "docs/.vitepress/theme/components/HomePage.vue",
          "shader": { "distortion": 1, "swirl": 0.5, "offsetX": 0.08, "speed": 0.4, "fit": 1 }
        }
      }
    }
  },
  "space": {
    "$description": "8-Punkt-Raster mit 4 als feinem Zwischenschritt.",
    "1": { "$value": "4px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-1" } } },
    "2": { "$value": "8px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-2" } } },
    "3": { "$value": "16px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-3" } } },
    "4": { "$value": "24px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-4" } } },
    "5": { "$value": "32px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-5" } } },
    "6": { "$value": "48px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-6" } } },
    "7": { "$value": "64px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-7" } } },
    "8": { "$value": "96px", "$type": "dimension", "$extensions": { "com.miragon": { "css": "--cd-space-8" } } }
  },
  "radius": {
    "$description": "Eckenradien. Ruhig und einheitlich statt beliebig.",
    "sm": { "$value": "6px", "$type": "dimension", "$description": "Kleine Elemente, Badges, Code-Chips.", "$extensions": { "com.miragon": { "css": "--cd-radius-sm" } } },
    "md": { "$value": "12px", "$type": "dimension", "$description": "Standard: Karten, Buttons, Eingaben.", "$extensions": { "com.miragon": { "css": "--cd-radius-md" } } },
    "lg": { "$value": "16px", "$type": "dimension", "$description": "Große Flächen, Kacheln, Panels.", "$extensions": { "com.miragon": { "css": "--cd-radius-lg" } } },
    "pill": { "$value": "999px", "$type": "dimension", "$description": "Pillen, runde Buttons, Avatare.", "$extensions": { "com.miragon": { "css": "--cd-radius-pill" } } }
  },
  "shadow": {
    "$description": "Schatten in drei Höhenstufen, getönt mit Marken-Schwarz statt reinem Schwarz. In beiden Modi gleich. Im Dark Mode sind sie kaum sichtbar, dort tragen die hellere Stufe und rolle.linie die Höhe.",
    "1": { "$value": "0 1px 2px rgba(29, 29, 29, 0.06), 0 1px 3px rgba(29, 29, 29, 0.10)", "$type": "shadow", "$description": "Subtil: Trennung, dezente Karten.", "$extensions": { "com.miragon": { "css": "--cd-shadow-1" } } },
    "2": { "$value": "0 4px 12px rgba(29, 29, 29, 0.10)", "$type": "shadow", "$description": "Karten, hervorgehobene Flächen.", "$extensions": { "com.miragon": { "css": "--cd-shadow-2" } } },
    "3": { "$value": "0 12px 32px rgba(29, 29, 29, 0.16)", "$type": "shadow", "$description": "Popover, Dialoge, schwebende Elemente.", "$extensions": { "com.miragon": { "css": "--cd-shadow-3" } } }
  },
  "motion": {
    "$description": "Dauern und Easing für Bewegung. Kurz und ruhig; immer prefers-reduced-motion respektieren.",
    "fast": { "$value": "150ms", "$type": "duration", "$description": "Hover, kleine Zustandswechsel.", "$extensions": { "com.miragon": { "css": "--cd-motion-fast" } } },
    "base": { "$value": "250ms", "$type": "duration", "$description": "Standard-Übergang.", "$extensions": { "com.miragon": { "css": "--cd-motion-base" } } },
    "slow": { "$value": "400ms", "$type": "duration", "$description": "Größere Ein-/Ausblendungen.", "$extensions": { "com.miragon": { "css": "--cd-motion-slow" } } },
    "ease": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)", "$type": "cubicBezier", "$description": "Standard-Easing.", "$extensions": { "com.miragon": { "css": "--cd-ease" } } },
    "ease-out": { "$value": "cubic-bezier(0, 0, 0.2, 1)", "$type": "cubicBezier", "$description": "Für Elemente, die hereinkommen.", "$extensions": { "com.miragon": { "css": "--cd-ease-out" } } }
  },
  "typeScale": {
    "$description": "Verbindliche Schrift-Hierarchie in Geist. Werte exakt übernehmen, nicht nach Gefühl skalieren.",
    "h1": { "$value": { "fontSize": "40px", "fontWeight": 700, "lineHeight": 1.1 }, "$type": "typography", "$description": "Seitentitel" },
    "h2": { "$value": { "fontSize": "28px", "fontWeight": 700, "lineHeight": 1.2 }, "$type": "typography", "$description": "Abschnitt" },
    "h3": { "$value": { "fontSize": "21px", "fontWeight": 600, "lineHeight": 1.3 }, "$type": "typography", "$description": "Unterpunkt" },
    "lead": { "$value": { "fontSize": "20px", "fontWeight": 400, "lineHeight": 1.5 }, "$type": "typography", "$description": "Einstieg, Intro" },
    "body": { "$value": { "fontSize": "16px", "fontWeight": 400, "lineHeight": 1.6 }, "$type": "typography", "$description": "Fließtext (Minimum für gute Lesbarkeit)" },
    "klein": { "$value": { "fontSize": "13px", "fontWeight": 400, "lineHeight": 1.5 }, "$type": "typography", "$description": "Bildunterschrift, Hinweis" }
  },
  "font": {
    "sans": { "$value": "Geist", "$type": "fontFamily", "$description": "Markenschrift (Vercel, SIL Open Font License), selbst gehostet." },
    "mono": { "$value": "Geist Mono", "$type": "fontFamily", "$description": "Code und feste Maße." }
  },
  "grid": {
    "$description": "Grundraster für Layouts.",
    "columns": { "$value": 12, "$type": "number" },
    "gutter": { "$value": "24px", "$type": "dimension" },
    "maxWidth": { "$value": "1152px", "$type": "dimension" }
  },
  "social": {
    "$description": "Pixelmaße für LinkedIn, den einzigen Kanal für Posts.",
    "linkedin": {
      "square": { "$value": { "width": 1200, "height": 1200 }, "$type": "dimension", "$description": "Quadrat 1:1" },
      "portrait": { "$value": { "width": 1200, "height": 1500 }, "$type": "dimension", "$description": "Hochformat 4:5, auch für Karussells (PDF-Dokument)" }
    }
  },
  "logo": {
    "$description": "Metadaten der offiziellen Logo-Vektoren (Dateien unter docs/public/logo/).",
    "variants": {
      "$value": ["gruen", "blau", "schwarz", "weiss"],
      "$type": "other",
      "$description": "Wortmarken-Farbvarianten. Standard ist gruen; weiss auf Farbe/Foto; schwarz monochrom."
    },
    "wordmarkViewBox": { "$value": "0 0 316.05 48.42", "$type": "other" },
    "kometViewBox": { "$value": "0 0 288.08 89.63", "$type": "other" },
    "minSize": {
      "wordmark": { "$value": { "web": "96px", "print": "20mm" }, "$type": "other" },
      "komet": { "$value": { "web": "24px", "print": "8mm" }, "$type": "other" }
    },
    "clearspace": { "$value": "Höhe des Buchstabens M", "$type": "other" }
  }
}