/*
 * Delivery Hub — design tokens.
 * Loaded on every surface (cardápio, mesa, PDV, cozinha, painel). Components read only
 * these variables, so the store brand (--dh-primary, set inline from settings) changes the
 * public pages without touching component CSS. Breakpoints (documented, used in media queries):
 *   mobile < 768px · tablet 768–1279px · desktop ≥ 1280px · wide ≥ 1600px
 */
:root {
	/* Brand (overridden inline by the store settings on public pages) */
	--dh-primary: #ea1d2c;
	--dh-primary-contrast: #fff;
	--dh-secondary: #1f2937;
	--dh-accent: #f59e0b;

	/* Neutral UI (operational screens use a calm, brand-independent palette) */
	--dh-ink: #13203a;
	--dh-ink-2: #3c4a63;
	--dh-muted: #64748b;
	--dh-line: #e2e8f0;
	--dh-line-strong: #cbd5e1;
	--dh-bg: #f4f6fa;
	--dh-surface: #fff;
	--dh-surface-2: #f8fafc;
	--dh-brand-ui: #1f4fd1;
	--dh-brand-ui-strong: #173ea8;
	--dh-brand-ui-soft: #e8efff;

	/* States */
	--dh-success: #0f7a46; --dh-success-soft: #e3f6ec;
	--dh-warning: #a15c00; --dh-warning-soft: #fff3dc;
	--dh-danger: #c0262d;  --dh-danger-soft: #fdeaea;
	--dh-info: #1f4fd1;    --dh-info-soft: #e8efff;

	/* Order status colors (shared by PDV, cozinha and cliente) */
	--dh-st-new: #d97706;  --dh-st-new-soft: #fff4e0;
	--dh-st-prep: #2563eb; --dh-st-prep-soft: #e7efff;
	--dh-st-ready: #059669; --dh-st-ready-soft: #e1f7ee;
	--dh-st-route: #7c3aed; --dh-st-route-soft: #f0e9ff;
	--dh-st-done: #64748b; --dh-st-done-soft: #eef2f6;
	--dh-st-cancel: #c0262d; --dh-st-cancel-soft: #fdeaea;

	/* Spacing (4px scale) */
	--dh-space-1: 4px; --dh-space-2: 8px; --dh-space-3: 12px; --dh-space-4: 16px;
	--dh-space-5: 20px; --dh-space-6: 24px; --dh-space-8: 32px; --dh-space-10: 40px;

	/* Radius */
	--dh-radius-sm: 8px; --dh-radius-md: 12px; --dh-radius-lg: 16px; --dh-radius-xl: 22px; --dh-radius-pill: 999px;

	/* Shadows */
	--dh-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
	--dh-shadow-2: 0 4px 14px rgba(15, 23, 42, .08);
	--dh-shadow-3: 0 18px 50px rgba(15, 23, 42, .18);

	/* Typography */
	--dh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dh-text-xs: 12px; --dh-text-sm: 13px; --dh-text-md: 15px; --dh-text-lg: 17px;
	--dh-text-xl: 20px; --dh-text-2xl: 24px; --dh-text-3xl: 30px;

	/* Controls: 44px is the minimum touch target; operational screens use 48px */
	--dh-control-h: 44px;
	--dh-control-h-lg: 52px;
	/* Chevron for custom selects (appearance: none removes the native arrow). */
	--dh-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--dh-touch: 48px;

	/* Layers (single source of truth for stacking) */
	--dh-z-sticky: 20;
	--dh-z-header: 40;
	--dh-z-nav: 50;
	--dh-z-drawer: 1000;
	--dh-z-modal: 100010; /* above the wp-admin toolbar (99999) */
	--dh-z-toast: 100020;

	/* Motion */
	--dh-ease: cubic-bezier(.2, .8, .2, 1);
	--dh-fast: 140ms;
	--dh-slow: 240ms;

	/* Operational density (PDV + Cozinha): many orders per screen, read for hours. */
	--dh-op-gap: 8px;
	--dh-op-card-pad: 8px 10px;
	--dh-op-card-min: 186px;
	--dh-op-radius: 10px;
	--dh-op-font-id: 15px;
	--dh-op-font-title: 13px;
	--dh-op-font-item: 12.5px;
	--dh-op-font-meta: 11px;
	--dh-op-font-badge: 10.5px;
	--dh-op-font-button: 12.5px;
	--dh-op-line: 1.32;
	--dh-op-control-h: 34px;
	--dh-op-chip-h: 28px;
	--dh-op-stage-h: 30px;

	/* Layout */
	--dh-header-h: 60px;
	--dh-nav-w: 232px;
	--dh-nav-w-compact: 76px;
	--dh-detail-w: 420px;
}

@media (prefers-reduced-motion: reduce) {
	:root { --dh-fast: 0ms; --dh-slow: 0ms; }
	*, *::before, *::after { scroll-behavior: auto !important; }
}

/* Shared accessibility helpers */
.dh-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dh-focusable:focus-visible, .dh-ui :focus-visible { outline: 3px solid color-mix(in srgb, var(--dh-brand-ui) 55%, transparent); outline-offset: 2px; }