/* ============================================================================
   Tableflow – Design-Tokens
   ----------------------------------------------------------------------------
   Einzige Quelle für Farben, Rundungen, Schatten und Trefferflächen.
   Komponenten-CSS greift ausschließlich auf diese Variablen zu, niemals auf
   feste Farbwerte. Ein Skin überschreibt nur diese Datei bzw. einzelne Tokens.

   WICHTIG – zwei getrennte Gruppen:
     • Marke/Flächen  → dürfen pro Kunde geändert werden
     • Status         → NICHT skinbar. Die Farben tragen in Küche, Bar und
                        Service Betriebsbedeutung. Wäre die Hausfarbe zufällig
                        dieselbe wie "fertig", liest das Personal den Schirm
                        unter Zeitdruck falsch.
   ========================================================================= */

:root {
    /* ── Marke ─────────────────────────────────────────────────────────── */
    --tf-brand: #713b56;
    --tf-brand-contrast: #ffffff;

    /* ── Flächen ───────────────────────────────────────────────────────── */
    --tf-bg: #f5f3ef;
    --tf-surface: #ffffff;
    --tf-surface-sunken: #eeeae4;
    --tf-border: #dedbd4;
    --tf-nav-bg: #242323;
    --tf-nav-text: #f6f0e7;
    --tf-nav-muted: #c1bcb6;
    --tf-nav-active: #483943;
    --tf-overlay: #17141999;

    /* ── Text ──────────────────────────────────────────────────────────── */
    --tf-text: #292625;
    --tf-text-muted: #68615c;
    --tf-text-inverted: #ffffff;

    /* ── Stationen (Kopfzeilen der Bestellkarten) ──────────────────────── */
    --tf-station-kitchen: #343b38;
    --tf-station-bar: #3b3544;
    --tf-station-service: #713b56;

    /* ── Status – nicht skinbar ────────────────────────────────────────── */
    --tf-status-open: #5b6675;
    --tf-status-preparing: #b45309;
    --tf-status-ready: #15803d;
    --tf-status-served: #8a94a3;
    --tf-status-cancelled: #b42318;

    /* Weiche Hintergründe der Status-Plaketten.
       Erst ein fester Wert als Rückfall, dann die berechnete Variante –
       wo color-mix fehlt, gilt schlicht der feste Wert darüber. */
    --tf-status-open-soft: #eceef1;
    --tf-status-open-soft: color-mix(in srgb, var(--tf-status-open) 12%, #fff);
    --tf-status-preparing-soft: #fdf1e1;
    --tf-status-preparing-soft: color-mix(in srgb, var(--tf-status-preparing) 14%, #fff);
    --tf-status-ready-soft: #e3f3e8;
    --tf-status-ready-soft: color-mix(in srgb, var(--tf-status-ready) 14%, #fff);
    --tf-status-served-soft: #f1f3f5;
    --tf-status-served-soft: color-mix(in srgb, var(--tf-status-served) 12%, #fff);
    --tf-status-cancelled-soft: #fbeae8;
    --tf-status-cancelled-soft: color-mix(in srgb, var(--tf-status-cancelled) 12%, #fff);

    /* ── Form ──────────────────────────────────────────────────────────── */
    --tf-radius-sm: .375rem;
    --tf-radius: .625rem;
    --tf-radius-lg: 1rem;
    --tf-radius-pill: 999px;

    --tf-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --tf-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .08);
    --tf-shadow-lg: 0 8px 28px rgba(16, 24, 40, .16);

    /* ── Trefferflächen ────────────────────────────────────────────────── */
    /* Stationen laufen auf Tablets und werden mit fettigen Fingern bedient –
       deshalb deutlich größer als im Admin-Bereich. */
    --tf-control-height-sm: 2rem;
    --tf-control-height: 2.5rem;
    --tf-control-height-lg: 3rem;

    /* ── Typografie ────────────────────────────────────────────────────── */
    --tf-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tf-text-sm: .8125rem;
    --tf-text-base: .9375rem;
    --tf-text-lg: 1.125rem;
    --tf-text-xl: 1.5rem;
}