/* ============================================================================
   Canteen Design System v2 — shared tokens.
   Design principles: DESIGN.md at the repo root.
   Rendered specimens and audit checklist: design-system.html at the repo root.
   Agent workflow: AGENTS.md § UI Design Authority.
   Extends the --pos-* typography scale in order-page.css; new work uses --ui-*.
   Plain CSS custom properties — no build step; loaded by layouts/app.blade.php.

   v2 changes (all text/tint pairs re-measured for WCAG AA):
   - --ui-muted darkened #77839A → #5B6B7F (old value failed 4.5:1 on white);
     the old value survives as --ui-faint for placeholders/disabled/decorative.
   - --ui-cook moved off brand blue (#1D4ED8 ≈ accent #1B4ED8 broke the
     one-hue-one-meaning rule) → sky #0369A1 on #E0F2FE.
   - --ui-ready / --ui-ok darkened #047857 → #065F46 (4.43:1 → 6.2:1 on tint).
   - Complete scales: color, type, spacing, shape, component size, z-index,
     motion, and the three permitted shadows.
   - New [data-theme="kds"] dark scope for the KDS wall display.
   ============================================================================ */
:root {
    /* surfaces & lines */
    --ui-bg: #ECEFF4;
    --ui-surface: #FFFFFF;
    --ui-s2: #F7F9FC;
    --ui-s3: #EEF2F7;
    --ui-line: #E2E7EF;
    --ui-line2: #C6D0DD;
    --ui-row-line: #F3F6FA;

    /* ink (text) */
    --ui-ink: #0A1020;
    --ui-ink2: #3F4B5E;
    --ui-muted: #5B6B7F;  /* smallest legal text color — 4.7:1+ on bg/surface/s2/s3 */
    --ui-faint: #77839A;  /* placeholders, disabled text, decorative glyphs ONLY — never real copy */
    --ui-on-accent: #FFFFFF;
    --ui-on-dark: #FFFFFF;
    --ui-on-danger: #FFFFFF;

    /* accent — the only brand color */
    --ui-accent: #1B4ED8;
    --ui-accent-2: #2563EB;
    --ui-accent-soft: #E9EFFF;
    --ui-accent-hover: #173FB0;
    --ui-accent-soft-hover: #DCE7FF;
    --ui-ink-hover: #1A2436;

    /* status: text / tint pairs — one hue per state, never reused */
    --ui-pending: #A16207;
    --ui-pending-bg: #FEF7E0; /* placed, waiting        */
    --ui-cook: #0369A1;
    --ui-cook-bg: #E0F2FE;    /* in progress            */
    --ui-ready: #065F46;
    --ui-ready-bg: #D7F5EA;   /* done · success · paid  */
    --ui-late: #BE123C;
    --ui-late-bg: #FFE8EE;    /* overdue · cancelled    */
    --ui-rush: #C2410C;
    --ui-rush-bg: #FFF0E6;    /* priority flag          */
    --ui-draft: #6D28D9;
    --ui-draft-bg: #F3EEFF;   /* unsent · unsettled     */

    /* fixed semantics */
    --ui-veg: #15803D;
    --ui-nonveg: #B91C1C;
    --ui-danger: #B91C1C;
    --ui-danger-hover: #961818;
    --ui-danger-soft: #FEF2F2;
    --ui-danger-line: #FBD5D5;
    --ui-ok: #065F46;

    /* code and technical samples */
    --ui-code-bg: #0F1626;
    --ui-code-ink: #D7E0EF;
    --ui-code-muted: #93A1B8;
    --ui-swatch-label-bg: rgba(255, 255, 255, 0.85);

    /* shape & size */
    --ui-r-mark: 3px;
    --ui-r-pill: 5px;
    --ui-r-input: 9px;
    --ui-r-ctl: 10px;
    --ui-r-card: 12px;
    --ui-r-modal: 14px;
    --ui-r-counter: 99px;
    --ui-ctl-h: 38px;
    --ui-icon-btn-size: 34px;
    --ui-diet-mark-size: 13px;
    --ui-diet-dot-size: 5px;
    --ui-switch-w: 36px;
    --ui-switch-h: 20px;
    --ui-switch-knob: 16px;
    --ui-checkbox-size: 16px;
    --ui-topbar-h: 52px;
    --ui-tab-underline-w: 2px;
    --ui-border-w: 1px;
    --ui-focus-w: 2.5px;
    --ui-focus-offset: 2px;

    /* spacing — 4px grid; component padding uses 2/3/4, section rhythm 5–8 */
    --ui-sp-1: 4px;
    --ui-sp-2: 8px;
    --ui-sp-3: 12px;
    --ui-sp-4: 16px;
    --ui-sp-5: 20px;
    --ui-sp-6: 24px;
    --ui-sp-7: 32px;
    --ui-sp-8: 48px;

    /* z-index — raw integers outside this scale are an audit finding */
    --ui-z-sticky: 100;
    --ui-z-dropdown: 200;
    --ui-z-overlay: 300;
    --ui-z-modal: 400;
    --ui-z-popover: 500;
    --ui-z-toast: 600;

    /* motion — animate color/background/border/opacity/transform/shadow only */
    --ui-dur-fast: 150ms;  /* color, border, background, opacity */
    --ui-dur-base: 200ms;  /* transform, small position changes  */
    --ui-dur-slow: 300ms;  /* modal / sheet enter                */
    --ui-ease: cubic-bezier(0.2, 0, 0, 1);

    /* the ONLY three shadows in the system */
    --ui-shadow-cta: 0 5px 14px -6px rgba(27, 78, 216, 0.6);
    --ui-shadow-modal: 0 24px 64px rgba(10, 16, 32, 0.18);
    --ui-shadow-sticky: 0 4px 12px rgba(10, 16, 32, 0.08);

    /* type — nine sizes, three weights, three line heights */
    --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    --ui-fs-display: 18px;
    --ui-fs-title: 17px;
    --ui-fs-heading: 16px;
    --ui-fs-subheading: 15px;
    --ui-fs-body: 14px;
    --ui-fs-sm: 13px;
    --ui-fs-label: 12px;
    --ui-fs-caption: 11px;
    --ui-fs-badge: 10px;
    --ui-fs-hero: clamp(26px, 4vw, 42px);
    --ui-fs-kds-min: 20px;

    --ui-fw-regular: 400;
    --ui-fw-semibold: 600;
    --ui-fw-bold: 700;

    --ui-lh-tight: 1.2;
    --ui-lh-heading: 1.3;
    --ui-lh-body: 1.5;

    --ui-track-tight: -0.02em;
    --ui-track-caption: 0.07em;
    --ui-track-badge: 0.05em;

    /* component aliases — recipes consume these, not literal values */
    --ui-button-primary-bg: var(--ui-accent);
    --ui-button-primary-fg: var(--ui-on-accent);
    --ui-button-primary-hover-bg: var(--ui-accent-hover);
    --ui-button-dark-bg: var(--ui-ink);
    --ui-button-dark-fg: var(--ui-on-dark);
    --ui-button-dark-hover-bg: var(--ui-ink-hover);
    --ui-button-ghost-bg: var(--ui-surface);
    --ui-button-ghost-fg: var(--ui-ink2);
    --ui-button-ghost-border: var(--ui-line2);
    --ui-button-ghost-hover-bg: var(--ui-s2);
    --ui-button-soft-bg: var(--ui-accent-soft);
    --ui-button-soft-fg: var(--ui-accent);
    --ui-button-soft-hover-bg: var(--ui-accent-soft-hover);
    --ui-button-danger-bg: var(--ui-danger);
    --ui-button-danger-fg: var(--ui-on-danger);
    --ui-button-danger-hover-bg: var(--ui-danger-hover);
    --ui-input-bg: var(--ui-s2);
    --ui-input-fg: var(--ui-ink);
    --ui-input-border: var(--ui-line2);
    --ui-input-focus-bg: var(--ui-surface);
    --ui-input-focus-border: var(--ui-accent-2);
    --ui-input-focus-halo: 0 0 0 3px var(--ui-accent-soft);
    --ui-table-row-line: var(--ui-row-line);

    /* ordering pages override this validated value on their page root */
    --tenant-accent: var(--ui-accent);
}

/* ============================================================================
   KDS dark scope — the wall display (resources/views/kds/index.blade.php).
   Fixed install, not a user preference: set data-theme="kds" on <html>.
   Semantic hue is preserved (pending stays amber, ready stays green); values
   brighten and badges invert to light glyph on deep tinted fill. Shadows are
   dead on dark surfaces — depth comes from --ui-line2 borders on every card.
   ============================================================================ */
[data-theme="kds"] {
    --ui-bg: #0B1020;
    --ui-surface: #111A2E;
    --ui-s2: #16213A;
    --ui-s3: #1C2947;
    --ui-line: #26334F;
    --ui-line2: #3A4A6B;
    --ui-row-line: #1C2947;

    --ui-ink: #F2F5FA;
    --ui-ink2: #C3CDDD;
    --ui-muted: #93A1B8;
    --ui-faint: #6B7A93;
    --ui-on-accent: #0B1020;
    --ui-on-dark: #0B1020;
    --ui-on-danger: #0B1020;

    --ui-accent: #8AB0FF;
    --ui-accent-2: #A5C2FF;
    --ui-accent-soft: #1D2A4D;
    --ui-accent-hover: #A5C2FF;
    --ui-accent-soft-hover: #26375F;
    --ui-ink-hover: #DCE5F2;

    --ui-pending: #FDE68A;
    --ui-pending-bg: #78350F;
    --ui-cook: #BAE6FD;
    --ui-cook-bg: #0C4A6E;
    --ui-ready: #86EFAC;
    --ui-ready-bg: #14532D;
    --ui-late: #FECACA;
    --ui-late-bg: #7F1D1D;
    --ui-rush: #FDBA74;
    --ui-rush-bg: #7C2D12;
    --ui-draft: #DDD6FE;
    --ui-draft-bg: #4C1D95;

    --ui-veg: #86EFAC;
    --ui-nonveg: #FCA5A5;
    --ui-danger: #F87171;
    --ui-danger-hover: #FCA5A5;
    --ui-danger-soft: #3F1D2A;
    --ui-danger-line: #7F1D1D;
    --ui-ok: #86EFAC;

    --ui-code-bg: #080D19;
    --ui-code-ink: #D7E0EF;
    --ui-code-muted: #93A1B8;
    --ui-swatch-label-bg: rgba(11, 16, 32, 0.85);

    --ui-shadow-cta: none;
    --ui-shadow-modal: none;
    --ui-shadow-sticky: none;
}

/* Touch stations get real touch targets — same markup, no JS. */
@media (pointer: coarse) {
    :root {
        --ui-ctl-h: 48px;
    }
}

/* Money, counts and order IDs align in columns. */
.num,
.money,
[data-money] {
    font-variant-numeric: tabular-nums;
}

/* One keyboard-focus treatment for every native and custom control. */
:focus-visible {
    outline: var(--ui-focus-w) solid var(--ui-accent-2);
    outline-offset: var(--ui-focus-offset);
}

/* Chimes, spinners and slide-ins collapse for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-dur-fast: 0.001ms;
        --ui-dur-base: 0.001ms;
        --ui-dur-slow: 0.001ms;
    }
}