{
  "name": "Schlossbote",
  "version": 1,
  "meta": {
    "source": "Schloss Hohenfels Design System (Self-Check-in-Kiosk), erweitert für das Mitarbeiter-Tool Schlossbote"
  },
  "color": {
    "note": "Zwei Themes: Hell (Tag, Rezeption) und Nacht (gedimmtes Küchen-Terminal, Spätschicht). Nacht ist keine Umkehrung: Schiefergrün statt Schwarz, Petrol und Statusfarben aufgehellt. Statusfarben tragen immer zusätzlich ein Wort und ein Icon.",
    "themes": [
      {
        "id": "light",
        "name": "Hell"
      },
      {
        "id": "dark",
        "name": "Nacht"
      }
    ],
    "tokens": [
      {
        "name": "kalkstein-50",
        "value": {
          "light": "#FBF9F4",
          "dark": "#1B211F"
        },
        "usage": "Eingelassene Flächen (sunken): Zusammenfassungen, Tabellenkopf, Protokoll-Hintergrund."
      },
      {
        "name": "kalkstein-100",
        "value": {
          "light": "#F6F2EA",
          "dark": "#161B19"
        },
        "usage": "Seitengrund auf Küchen-Terminal und Rezeptions-Dashboard. Im Nachtmodus tiefes Schiefergrün."
      },
      {
        "name": "kalkstein-200",
        "value": {
          "light": "#ECE5D6",
          "dark": "#2C3532"
        },
        "usage": "Deaktivierte Flächen, Offline-Badge, Stepper-Tasten im Ruhezustand."
      },
      {
        "name": "kalkstein-300",
        "value": {
          "light": "#E3DCCD",
          "dark": "#36403C"
        },
        "usage": "Haarlinien und Trenner zwischen Zeilen. Keine Feldränder (zu schwach für 3:1)."
      },
      {
        "name": "kalkstein-600",
        "value": {
          "light": "#7A7264",
          "dark": "#8E978F"
        },
        "usage": "Text und Icons auf deaktivierten Flächen (kalkstein-200). Nie für lesbaren Fließtext."
      },
      {
        "name": "rand-feld",
        "value": {
          "light": "#8A8272",
          "dark": "#6E7A74"
        },
        "usage": "Rahmen von Eingabefeldern und Stepper. Hell 3,8:1 auf papier, dunkel 3,3:1."
      },
      {
        "name": "papier",
        "value": {
          "light": "#FFFFFF",
          "dark": "#222A27"
        },
        "usage": "Karten, Kacheln, Dialoge, Eingabefelder."
      },
      {
        "name": "karte-rand",
        "value": {
          "light": "rgba(227, 220, 205, 0.6)",
          "dark": "rgba(238, 233, 223, 0.08)"
        },
        "usage": "Haarlinie um Karten, Kacheln und Dialoge. Hell kaum sichtbar (der Schatten trägt die Kante), im Nachtmodus trägt sie die Kante allein."
      },
      {
        "name": "ink",
        "value": {
          "light": "#262E2B",
          "dark": "#EEE9DF"
        },
        "usage": "Fließtext, Zahlen und Überschriften auf papier, kalkstein-100 und petrol-100 (hell ab 10,5:1, dunkel ab 8,8:1)."
      },
      {
        "name": "ink-muted",
        "value": {
          "light": "#59625E",
          "dark": "#A9B2AC"
        },
        "usage": "Sekundärtext: Zeitstempel, Absender, Hilfezeilen. Auf papier, kalkstein-100 und kalkstein-200 (ab 5:1 in beiden Themes)."
      },
      {
        "name": "petrol-50",
        "value": {
          "light": "#EBF3F2",
          "dark": "#1D3431"
        },
        "usage": "Hover-Tönung auf weißen Flächen, Hintergrund der Info-Badges, ausgewählte Zeile."
      },
      {
        "name": "petrol-100",
        "value": {
          "light": "#D2E4E1",
          "dark": "#224440"
        },
        "usage": "Aktive Tab-Fläche, Hintergrund des Hinweisbanners für neue Änderungen."
      },
      {
        "name": "petrol-glow",
        "value": {
          "light": "rgba(30, 92, 87, 0.30)",
          "dark": "rgba(95, 179, 169, 0.38)"
        },
        "usage": "Atmender Leuchtring um eine neue, unbestätigte Änderung. Nur für Animation."
      },
      {
        "name": "petrol-600",
        "value": {
          "light": "#1E5C57",
          "dark": "#5FB3A9"
        },
        "usage": "Einzige Primäraktion (Bestätigen, Senden), Fokusring, Links, aktive Icons. Im Nachtmodus heller, mit dunklem on-petrol als Text (7:1)."
      },
      {
        "name": "petrol-700",
        "value": {
          "light": "#184A46",
          "dark": "#76C2B9"
        },
        "usage": "Hover der Primäraktion."
      },
      {
        "name": "petrol-800",
        "value": {
          "light": "#123833",
          "dark": "#4A9C93"
        },
        "usage": "Gedrückter Zustand der Primäraktion."
      },
      {
        "name": "petrol-text",
        "value": {
          "light": "#123833",
          "dark": "#A6DCD4"
        },
        "usage": "Text und Icons auf petrol-50 und petrol-100: Badge Neu, Hinweisbanner, aktive Biometrie-Methode (ab 7:1 in beiden Themes)."
      },
      {
        "name": "on-petrol",
        "value": {
          "light": "#FFFFFF",
          "dark": "#0F1E1C"
        },
        "usage": "Text und Icons auf petrol-600, petrol-700, petrol-800 und auf ziegel-600-Flächen. Hell Weiß, dunkel fast Schwarz."
      },
      {
        "name": "messing-500",
        "value": {
          "light": "#A98A45",
          "dark": "#C2A35C"
        },
        "usage": "Nur Schmuck: Haarlinie unter der Wortmarke, Punkt im Kopf. Hell 2,9:1 auf kalkstein-100, daher nie Text."
      },
      {
        "name": "messing-50",
        "value": {
          "light": "#F7F0DF",
          "dark": "#3A3220"
        },
        "usage": "Hintergrund für Status Offen und für die Frist-Anzeige."
      },
      {
        "name": "messing-700",
        "value": {
          "light": "#7A6128",
          "dark": "#E0C27E"
        },
        "usage": "Text und Icon für Status Offen, Overlines. Auf messing-50, papier und kalkstein-100 (ab 5,2:1)."
      },
      {
        "name": "moos-50",
        "value": {
          "light": "#EDF2EA",
          "dark": "#22301F"
        },
        "usage": "Hintergrund für Status Bestätigt."
      },
      {
        "name": "moos-600",
        "value": {
          "light": "#4F6B45",
          "dark": "#93B585"
        },
        "usage": "Erfolg: Bestätigt, Biometrie erkannt. Text auf papier 6:1. Immer mit Wort und Häkchen-Icon."
      },
      {
        "name": "moos-700",
        "value": {
          "light": "#3F5837",
          "dark": "#B0CDA2"
        },
        "usage": "Text für Status Bestätigt auf moos-50 (6,9:1)."
      },
      {
        "name": "ziegel-50",
        "value": {
          "light": "#F8ECE8",
          "dark": "#3D231D"
        },
        "usage": "Hintergrund für Status Eskaliert und für Fehlermeldungen."
      },
      {
        "name": "ziegel-600",
        "value": {
          "light": "#A94F38",
          "dark": "#E58A71"
        },
        "usage": "Fehler, Eskalation, destruktive Aktion (Änderung zurückziehen). Weißer Text darauf 5,4:1."
      },
      {
        "name": "ziegel-700",
        "value": {
          "light": "#8E3F2B",
          "dark": "#F2A893"
        },
        "usage": "Text für Status Eskaliert auf ziegel-50 (6,3:1)."
      },
      {
        "name": "scrim",
        "value": {
          "light": "rgba(38, 46, 43, 0.32)",
          "dark": "rgba(5, 8, 7, 0.62)"
        },
        "usage": "Abdunklung hinter dem Biometrie-Dialog. Einzige Transparenz im System."
      }
    ]
  },
  "type": {
    "fonts": [
      {
        "family": "Fraunces",
        "file": "fonts/fraunces-latin-full-normal.woff2",
        "weight": "100 900",
        "style": "normal"
      },
      {
        "family": "Albert Sans",
        "file": "fonts/albert-sans-latin-wght-normal.woff2",
        "weight": "100 900",
        "style": "normal"
      }
    ],
    "families": {
      "display": "Fraunces, \"Iowan Old Style\", Georgia, serif",
      "sans": "\"Albert Sans\", \"Segoe UI\", system-ui, sans-serif"
    },
    "groups": [
      {
        "name": "Küchen-Terminal",
        "family": "sans",
        "styles": [
          {
            "name": "terminal-zahl",
            "fontSize": "72px",
            "lineHeight": "76px",
            "fontWeight": 600,
            "letterSpacing": "-0.01em",
            "sample": "45",
            "usage": "Gästezahl pro Mahlzeit auf dem Touchscreen, lesbar aus zwei Metern. Immer tabellarische Ziffern."
          },
          {
            "name": "terminal-titel",
            "fontSize": "36px",
            "lineHeight": "44px",
            "fontWeight": 400,
            "family": "display",
            "sample": "Heute, Donnerstag",
            "usage": "Eine Überschrift pro Screen. Fraunces, ruhig, ohne Swashes."
          },
          {
            "name": "terminal-text",
            "fontSize": "22px",
            "lineHeight": "32px",
            "fontWeight": 400,
            "sample": "Rezeption meldet 3 zusätzliche Gäste zum Abendessen.",
            "usage": "Fließtext und Änderungsinhalte am Terminal."
          },
          {
            "name": "terminal-label",
            "fontSize": "18px",
            "lineHeight": "24px",
            "fontWeight": 500,
            "sample": "Vegan",
            "usage": "Beschriftungen, Badges, Buttons am Terminal."
          }
        ]
      },
      {
        "name": "Rezeption",
        "family": "sans",
        "styles": [
          {
            "name": "pult-titel",
            "fontSize": "28px",
            "lineHeight": "36px",
            "fontWeight": 400,
            "family": "display",
            "sample": "Mahlzeiten diese Woche",
            "usage": "Seitentitel im Rezeptions-Dashboard. Fraunces."
          },
          {
            "name": "pult-abschnitt",
            "fontSize": "18px",
            "lineHeight": "26px",
            "fontWeight": 600,
            "sample": "Abendessen, Do 6. Nov",
            "usage": "Kartentitel und Abschnittsüberschriften."
          },
          {
            "name": "pult-text",
            "fontSize": "15px",
            "lineHeight": "24px",
            "fontWeight": 400,
            "sample": "Gruppe Bergmann hat zwei Personen nachgemeldet.",
            "usage": "Fließtext und Tabelleninhalt am Arbeitsplatz-PC."
          },
          {
            "name": "pult-label",
            "fontSize": "13px",
            "lineHeight": "18px",
            "fontWeight": 500,
            "sample": "Quelle: Apaleo",
            "usage": "Feldbeschriftungen (immer über dem Feld), Badges, Zeitstempel."
          },
          {
            "name": "overline",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 600,
            "letterSpacing": "0.14em",
            "sample": "SCHLOSSBOTE",
            "usage": "Gesperrte Großbuchstaben über Titeln, in messing-700. Einziger Ort für Großschreibung."
          }
        ]
      }
    ],
    "note": "Beide Schriften liegen als variable Fonts (OFL) unter fonts/, damit das Küchen-Terminal auch offline richtig gesetzt ist. Fraunces nur für den einen Titel pro Screen und die Wortmarke, ruhig gesetzt (SOFT 0, WONK 0)."
  },
  "spacing": {
    "note": "4er-Raster. Terminal nutzt die großen Schritte, Rezeption die kleinen.",
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Abstand Icon zu Text in Badges."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Abstand zwischen Label und Feld, zwischen Badges."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Innenabstand Badges horizontal, Zeilenabstand im Protokoll."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Innenabstand Karten am Pult, Raster-Gap am Pult."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Innenabstand Karten am Terminal, Gap zwischen Mahlzeit-Kacheln."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Abstand zwischen Abschnitten."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Seitenrand Terminal."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Seitenrand großer Screens, Höhe Primärbutton am Terminal."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "8px",
        "usage": "Badges mit Ecken, Stepper-Tasten am Pult, Tabellenzellen-Hervorhebung."
      },
      {
        "name": "radius-md",
        "value": "14px",
        "usage": "Buttons und Eingabefelder (aus dem Hohenfels-Kiosk)."
      },
      {
        "name": "radius-lg",
        "value": "18px",
        "usage": "Karten und Mahlzeit-Kacheln."
      },
      {
        "name": "radius-xl",
        "value": "24px",
        "usage": "Dialoge und Sheets (Biometrie-Bestätigung)."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Status-Badges, Verbindungsanzeige."
      }
    ]
  },
  "shadow": {
    "note": "Hell warm getönt auf Schiefergrün-Basis, Nacht dunkler und weicher. Groß und schwach, nie harte Kanten.",
    "tokens": [
      {
        "name": "shadow-card",
        "value": {
          "light": "0 1px 2px rgba(38, 46, 43, 0.05), 0 6px 18px rgba(38, 46, 43, 0.06)",
          "dark": "0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.28)"
        },
        "usage": "Karten und Kacheln auf kalkstein-100."
      },
      {
        "name": "shadow-raised",
        "value": {
          "light": "0 2px 4px rgba(38, 46, 43, 0.06), 0 14px 32px rgba(38, 46, 43, 0.10)",
          "dark": "0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.40)"
        },
        "usage": "Neue, noch unbestätigte Änderung am Terminal; Hinweisbanner."
      },
      {
        "name": "shadow-sheet",
        "value": {
          "light": "0 24px 64px rgba(38, 46, 43, 0.18)",
          "dark": "0 28px 72px rgba(0, 0, 0, 0.55)"
        },
        "usage": "Biometrie-Dialog über dem Scrim."
      }
    ]
  },
  "size": {
    "note": "Mindestgrößen für Bedienelemente.",
    "tokens": [
      {
        "name": "ziel-terminal",
        "value": "64px",
        "usage": "Mindesthöhe aller Touch-Ziele am Küchen-Terminal (nasse oder behandschuhte Hände)."
      },
      {
        "name": "ziel-pult",
        "value": "40px",
        "usage": "Höhe von Buttons und Feldern am Rezeptions-PC."
      },
      {
        "name": "fokus-breite",
        "value": "3px",
        "usage": "Breite des Fokusrings in petrol-600, mit 2px Abstand zum Element."
      }
    ]
  }
}