/* ============================================================
   denschOrder · denschDesignLanguage (DDL)
   ============================================================
   Single Source of Truth für Tokens (Farben, Spacing, Radius,
   Shadows, Typography). Wird in jeder Page eingebunden via
       <link rel="stylesheet" href="/css/ddl.css">

   DSGVO: alle Fonts werden lokal in /fonts/ gehostet.
   Keine externen CDN-Calls.
   ============================================================ */


/* ── Fonts (lokal) ──────────────────────────────────────── */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono/JetBrainsMono-Variable.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
/* Inter ist separat in /fonts/inter.css definiert (shared). */


/* ── Tokens: Light-Mode (Default) ───────────────────────── */
:root {
    /* Farb-Palette — Brand Violett (PiBoSa-Default, per Restaurant überschreibbar) */
    --ddl-accent:           #6B21A8;
    --ddl-accent-light:     #8B5CF6;
    --ddl-accent-dark:      #581C87;
    --ddl-accent-tint:      rgba(107, 33, 168, 0.10);
    --ddl-accent-glow:      rgba(107, 33, 168, 0.20);

    /* Semantik-Farben */
    --ddl-ok:               #16A34A;
    --ddl-ok-tint:          rgba(34, 197, 94, 0.10);
    --ddl-warn:             #D97706;
    --ddl-warn-tint:        rgba(217, 119, 6, 0.10);
    --ddl-err:              #DC2626;
    --ddl-err-tint:         rgba(220, 38, 38, 0.10);
    --ddl-info:             #0891B2;

    /* Hintergründe */
    --ddl-bg-page:          #f5f5f7;
    --ddl-bg-white:         #ffffff;
    --ddl-bg-card:          #ffffff;
    --ddl-bg-light:         #fafafa;
    --ddl-bg-overlay:       rgba(0, 0, 0, 0.50);

    /* Text */
    --ddl-text:             #1d1d1f;
    --ddl-text-soft:        #6b7280;
    --ddl-text-muted:       #aeaeb2;
    --ddl-text-on-accent:   #ffffff;

    /* Borders */
    --ddl-border:           #e5e5e7;
    --ddl-border-strong:    #c7c7cc;
    --ddl-divider:          rgba(0, 0, 0, 0.06);

    /* Spacing-Skala (4-Punkt-Grid) */
    --ddl-sp-1: 4px;
    --ddl-sp-2: 8px;
    --ddl-sp-3: 12px;
    --ddl-sp-4: 16px;
    --ddl-sp-5: 20px;
    --ddl-sp-6: 24px;
    --ddl-sp-8: 32px;
    --ddl-sp-10: 40px;
    --ddl-sp-12: 48px;
    --ddl-sp-16: 64px;

    /* Radius */
    --ddl-radius-xs: 4px;
    --ddl-radius-sm: 6px;
    --ddl-radius-md: 10px;
    --ddl-radius-lg: 14px;
    --ddl-radius-xl: 20px;
    --ddl-radius-pill: 980px;

    /* Shadows */
    --ddl-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --ddl-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --ddl-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --ddl-shadow-lg: 0 10px 28px rgba(0,0,0,0.12);

    /* Typography */
    --ddl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ddl-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Sizes */
    --ddl-fs-xs:   11px;
    --ddl-fs-sm:   12px;
    --ddl-fs-base: 14px;
    --ddl-fs-md:   15px;
    --ddl-fs-lg:   17px;
    --ddl-fs-xl:   20px;
    --ddl-fs-2xl:  24px;
    --ddl-fs-3xl:  32px;
    --ddl-fs-4xl:  44px;

    /* Lines */
    --ddl-lh-tight: 1.2;
    --ddl-lh-normal: 1.5;
    --ddl-lh-relaxed: 1.7;

    /* Transitions */
    --ddl-trans-fast: 120ms ease;
    --ddl-trans-base: 200ms ease;
    --ddl-trans-slow: 400ms ease;
}


/* ── Tokens: Dark-Mode ──────────────────────────────────── */
html[data-mode="dark"] {
    --ddl-bg-page:          #0F0F10;
    --ddl-bg-white:         #1C1C1E;
    --ddl-bg-card:          #1C1C1E;
    --ddl-bg-light:         #2C2C2E;

    --ddl-text:             #F0F0F0;
    --ddl-text-soft:        #8E8E93;
    --ddl-text-muted:       #636366;

    --ddl-border:           rgba(255, 255, 255, 0.08);
    --ddl-border-strong:    rgba(255, 255, 255, 0.20);
    --ddl-divider:          rgba(255, 255, 255, 0.06);

    --ddl-shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
    --ddl-shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --ddl-shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --ddl-shadow-lg: 0 10px 28px rgba(0,0,0,0.55);
}


/* ── Compatibility-Aliases — die alten Variablen-Namen
      bleiben gültig und mappen auf die DDL-Tokens. So bricht
      kein bestehender CSS-Code.                            ── */
:root,
html[data-mode="dark"] {
    --bg-page:        var(--ddl-bg-page);
    --bg-white:       var(--ddl-bg-white);
    --bg-card:        var(--ddl-bg-card);
    --bg-light:       var(--ddl-bg-light);

    --text:           var(--ddl-text);
    --text-primary:   var(--ddl-text);
    --text-soft:      var(--ddl-text-soft);
    --text-secondary: var(--ddl-text-soft);
    --text-muted:     var(--ddl-text-muted);

    --border:         var(--ddl-border);
    --accent:         var(--ddl-accent);
    --accent-light:   var(--ddl-accent-light);
    --accent-dark:    var(--ddl-accent-dark);
    --accent-tint:    var(--ddl-accent-tint);
    --accent-glow:    var(--ddl-accent-glow);

    --shadow:         var(--ddl-shadow-sm);
    --shadow-md:      var(--ddl-shadow-md);
    --shadow-lg:      var(--ddl-shadow-lg);
}


/* ── Globale Defaults ────────────────────────────────────── */
html { font-family: var(--ddl-font-sans); }

/* Eyebrow / Caption / Mono-Numbers */
.ddl-eyebrow,
.hero-eyebrow,
.section-eyebrow,
.brand-overline,
.dm-page-eyebrow,
.dc-page-eyebrow,
.dl-page-eyebrow {
    font-family: var(--ddl-font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.ddl-caption-mono,
.caption-mono,
.ddl-num,
.bestell-nummer {
    font-family: var(--ddl-font-mono);
    font-feature-settings: 'tnum' 1;
}


/* ============================================================
   DDL Komponenten — bevorzugt für neuen Code
   Bestehende .do-*, .cust-*, .btn-pill, .an-*, .disp-*, .bon-*
   bleiben kompatibel und referenzieren intern dieselben
   DDL-Tokens via Variable-Aliasing.
   ============================================================ */


/* ── Buttons ───────────────────────────────────────────────── */
.ddl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ddl-sp-2);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--ddl-radius-md);
    font: 600 var(--ddl-fs-base)/1 var(--ddl-font-sans);
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--ddl-trans-fast), background var(--ddl-trans-fast), border-color var(--ddl-trans-fast), color var(--ddl-trans-fast), transform var(--ddl-trans-fast);
    background: var(--ddl-accent);
    color: var(--ddl-text-on-accent);
}
.ddl-btn:hover { filter: brightness(1.08); color: var(--ddl-text-on-accent); }
.ddl-btn:active { transform: scale(0.98); }
.ddl-btn[disabled], .ddl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ddl-btn-secondary {
    background: transparent;
    color: var(--ddl-text);
    border-color: var(--ddl-border);
}
.ddl-btn-secondary:hover { background: var(--ddl-bg-light); color: var(--ddl-accent); border-color: var(--ddl-accent); }

.ddl-btn-ghost {
    background: transparent;
    color: var(--ddl-accent);
    border-color: transparent;
}
.ddl-btn-ghost:hover { background: var(--ddl-accent-tint); color: var(--ddl-accent); }

.ddl-btn-danger {
    background: var(--ddl-err);
    color: #fff;
}
.ddl-btn-danger:hover { filter: brightness(1.08); }

.ddl-btn-sm { padding: 6px 12px; font-size: var(--ddl-fs-sm); border-radius: var(--ddl-radius-sm); }
.ddl-btn-lg { padding: 14px 28px; font-size: var(--ddl-fs-md); border-radius: var(--ddl-radius-lg); }

.ddl-btn-pill { border-radius: var(--ddl-radius-pill); }

.ddl-btn-icon {
    width: 32px; height: 32px;
    padding: 0;
    border-radius: var(--ddl-radius-sm);
    background: transparent;
    color: var(--ddl-text);
    border-color: var(--ddl-border);
}
.ddl-btn-icon:hover { background: var(--ddl-accent-tint); color: var(--ddl-accent); border-color: var(--ddl-accent); }
.ddl-btn-icon.danger { color: var(--ddl-err); }
.ddl-btn-icon.danger:hover { background: var(--ddl-err-tint); border-color: var(--ddl-err); }


/* ── Cards ─────────────────────────────────────────────────── */
.ddl-card {
    background: var(--ddl-bg-card);
    border: 1px solid var(--ddl-border);
    border-radius: var(--ddl-radius-lg);
    padding: var(--ddl-sp-6);
    box-shadow: var(--ddl-shadow-xs);
    margin-bottom: var(--ddl-sp-4);
}
.ddl-card-tight { padding: var(--ddl-sp-4); }
.ddl-card h2 { margin: 0 0 var(--ddl-sp-3); font-size: var(--ddl-fs-lg); font-weight: 700; }
.ddl-card h3 { margin: 0 0 var(--ddl-sp-3); font-size: var(--ddl-fs-md); font-weight: 700; }


/* ── Inputs ────────────────────────────────────────────────── */
.ddl-input,
.ddl-select,
.ddl-textarea {
    display: block; width: 100%;
    padding: 10px 14px;
    background: var(--ddl-bg-page);
    color: var(--ddl-text);
    border: 1px solid var(--ddl-border);
    border-radius: var(--ddl-radius-md);
    font: 400 var(--ddl-fs-base)/1.4 var(--ddl-font-sans);
    transition: border-color var(--ddl-trans-fast), box-shadow var(--ddl-trans-fast);
}
.ddl-input:focus,
.ddl-select:focus,
.ddl-textarea:focus {
    outline: none;
    border-color: var(--ddl-accent);
    box-shadow: 0 0 0 3px var(--ddl-accent-tint);
}
.ddl-textarea { min-height: 80px; resize: vertical; }
.ddl-label { display: block; font: 600 var(--ddl-fs-sm)/1.4 var(--ddl-font-sans); color: var(--ddl-text-soft); margin-bottom: 4px; }
.ddl-hint { font-size: var(--ddl-fs-xs); color: var(--ddl-text-muted); margin-top: 4px; }


/* ── Badges ────────────────────────────────────────────────── */
.ddl-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ddl-radius-pill);
    font: 700 var(--ddl-fs-xs)/1 var(--ddl-font-sans);
    background: var(--ddl-bg-light);
    color: var(--ddl-text-soft);
}
.ddl-badge-success { background: var(--ddl-ok-tint); color: var(--ddl-ok); }
.ddl-badge-warn    { background: var(--ddl-warn-tint); color: var(--ddl-warn); }
.ddl-badge-error   { background: var(--ddl-err-tint); color: var(--ddl-err); }
.ddl-badge-info    { background: var(--ddl-accent-tint); color: var(--ddl-accent); }


/* ── Flash-Messages ────────────────────────────────────────── */
.ddl-flash {
    padding: var(--ddl-sp-3) var(--ddl-sp-4);
    border-radius: var(--ddl-radius-md);
    margin-bottom: var(--ddl-sp-4);
    font-size: var(--ddl-fs-base);
    font-weight: 500;
    border: 1px solid transparent;
}
.ddl-flash-success { background: var(--ddl-ok-tint); color: var(--ddl-ok); border-color: rgba(34,197,94,0.30); }
.ddl-flash-warn    { background: var(--ddl-warn-tint); color: var(--ddl-warn); border-color: rgba(217,119,6,0.30); }
.ddl-flash-error   { background: var(--ddl-err-tint); color: var(--ddl-err); border-color: rgba(220,38,38,0.30); }
.ddl-flash-info    { background: var(--ddl-accent-tint); color: var(--ddl-accent); border-color: rgba(107,33,168,0.30); }


/* ── Tabellen ──────────────────────────────────────────────── */
.ddl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ddl-fs-base);
}
.ddl-table th,
.ddl-table td {
    padding: var(--ddl-sp-3) var(--ddl-sp-4);
    text-align: left;
    border-bottom: 1px solid var(--ddl-border);
}
.ddl-table th {
    font-weight: 700;
    color: var(--ddl-text-soft);
    font-size: var(--ddl-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ddl-table tbody tr:hover { background: var(--ddl-bg-light); }


/* ── Layout-Helper ────────────────────────────────────────── */
.ddl-stack { display: flex; flex-direction: column; gap: var(--ddl-sp-3); }
.ddl-stack-tight { gap: var(--ddl-sp-2); }
.ddl-stack-loose { gap: var(--ddl-sp-6); }
.ddl-row { display: flex; align-items: center; gap: var(--ddl-sp-3); }
.ddl-row-end { justify-content: flex-end; }
.ddl-row-between { justify-content: space-between; }
.ddl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ddl-sp-4); }
.ddl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ddl-sp-4); }
@media (max-width: 720px) {
    .ddl-grid-2, .ddl-grid-3 { grid-template-columns: 1fr; }
}


/* ── Compatibility-Layer: Existing-Klassen erben DDL-Defaults
      (NICHT komplett, nur sicheren Teil) ─────────────────── */

/* Bestehende Buttons bekommen DDL-Tokens für Schrift/Übergang */
.do-btn,
.cust-btn,
.cust-konfig-add,
.btn-pill {
    font-family: var(--ddl-font-sans);
}