/* =====================================================================
 * Delivery — Design System Tokens 2026
 * Paleta calorosa "food-app", tipografia forte, escala generosa.
 * Carregue ANTES de cliente.css e admin.css.
 * ===================================================================== */

:root {
    /* ─── Brand (coral/laranja apetitoso) ─────────────────────────── */
    --brand-50:  #fff4ef;
    --brand-100: #ffe1d4;
    --brand-200: #ffc4ab;
    --brand-300: #ffa078;
    --brand-400: #ff7b45;
    --brand-500: #ff5722;
    --brand-600: #ff3d24;
    --brand-700: #db2a18;
    --brand-800: #b21f10;
    --brand-900: #7c1408;
    --brand-rgb: 255, 61, 36;

    --brand:        var(--brand-600);
    --brand-strong: var(--brand-700);
    --brand-soft:   var(--brand-50);

    /* ─── Accent secundário (sunshine yellow para "Aberto agora", highlight) ─── */
    --accent-yellow: #ffd400;
    --accent-yellow-soft: #fff8d6;
    --accent-mint:   #1ed397;
    --accent-mint-soft: #e6fbf3;
    --accent-blue:   #2d8eff;
    --accent-blue-soft: #e1efff;
    --accent-purple: #9655ff;
    --accent-purple-soft: #f1e7ff;
    --accent-pink:   #ff5a8a;
    --accent-pink-soft: #ffe1ec;

    /* ─── Ink (texto) — warm neutrals ────────────────────────────── */
    --ink-0:   #ffffff;
    --ink-50:  #fefaf3;
    --ink-100: #f8f0e3;
    --ink-150: #ede2cf;
    --ink-200: #ddd0b8;
    --ink-300: #c2b39a;
    --ink-400: #94897a;
    --ink-500: #6c6256;
    --ink-600: #4a4238;
    --ink-700: #312b22;
    --ink-800: #1f1a13;
    --ink-900: #110d08;

    /* ─── Semânticas ─────────────────────────────────────────────── */
    --success:    #1ed397;
    --success-bg: #e6fbf3;
    --warning:    #ffb020;
    --warning-bg: #fff5db;
    --danger:     #f23b3b;
    --danger-bg:  #ffe9e9;
    --info:       #2d8eff;
    --info-bg:    #e1efff;

    /* ─── Surfaces ───────────────────────────────────────────────── */
    --surface:        #ffffff;
    --surface-elev:   #ffffff;
    --surface-muted:  #fff8ef;
    --surface-app:    #fff5e9;
    --surface-glass:  rgba(255, 248, 239, 0.82);
    --surface-dark:   #1f1a13;
    --border-soft:    #f1e6d2;
    --border:         #e2d4ba;
    --border-strong:  #c2b39a;

    /* ─── Tipografia ─────────────────────────────────────────────── */
    --font-sans:    "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.0625rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  1.875rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;
    --text-5xl:  3.75rem;

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-base:  1.55;
    --leading-loose: 1.75;

    --tracking-tight: -0.025em;
    --tracking-base:  -0.01em;
    --tracking-wide:  0.04em;
    --tracking-ultra: 0.14em;

    /* ─── Spacing (4px grid) ─────────────────────────────────────── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-7:  1.75rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-14: 3.5rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ─── Radius ─────────────────────────────────────────────────── */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-2xl:  40px;
    --r-pill: 9999px;

    /* ─── Shadows ────────────────────────────────────────────────── */
    --shadow-0: none;
    --shadow-1: 0 1px 2px rgba(31, 26, 19, 0.05), 0 1px 1px rgba(31, 26, 19, 0.03);
    --shadow-2: 0 4px 14px -2px rgba(31, 26, 19, 0.07), 0 2px 4px -1px rgba(31, 26, 19, 0.04);
    --shadow-3: 0 12px 30px -8px rgba(31, 26, 19, 0.12), 0 4px 12px -2px rgba(31, 26, 19, 0.06);
    --shadow-4: 0 28px 60px -12px rgba(31, 26, 19, 0.18), 0 10px 22px -6px rgba(31, 26, 19, 0.08);
    --shadow-5: 0 48px 88px -24px rgba(31, 26, 19, 0.28);
    --shadow-brand:    0 12px 28px -6px rgba(var(--brand-rgb), 0.42), 0 2px 6px rgba(var(--brand-rgb), 0.2);
    --shadow-brand-sm: 0 6px 16px -4px rgba(var(--brand-rgb), 0.36);
    --ring-brand:      0 0 0 4px rgba(var(--brand-rgb), 0.18);

    /* ─── Gradients ──────────────────────────────────────────────── */
    --grad-brand: linear-gradient(135deg, #ff7b45 0%, #ff3d24 60%, #db2a18 100%);
    --grad-brand-soft: linear-gradient(135deg, #fff4ef 0%, #ffe1d4 100%);
    --grad-warm:  linear-gradient(135deg, #ffd400 0%, #ff7b45 50%, #ff3d24 100%);
    --grad-night: linear-gradient(155deg, #1f1a13 0%, #312b22 60%, #4a4238 100%);
    --grad-mesh:  radial-gradient(at 8% 12%, rgba(var(--brand-rgb), 0.10) 0px, transparent 50%),
                  radial-gradient(at 92% 22%, rgba(255, 212, 0, 0.10) 0px, transparent 50%),
                  radial-gradient(at 50% 92%, rgba(30, 211, 151, 0.06) 0px, transparent 50%);

    /* ─── Transitions ────────────────────────────────────────────── */
    --t-fast:   140ms cubic-bezier(0.2, 0.7, 0.3, 1);
    --t-base:   220ms cubic-bezier(0.2, 0.7, 0.3, 1);
    --t-slow:   400ms cubic-bezier(0.2, 0.7, 0.3, 1);
    --t-spring: 450ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Layout admin ───────────────────────────────────────────── */
    --sidebar-w: 268px;
    --topbar-h:  72px;

    /* ─── Z-index ────────────────────────────────────────────────── */
    --z-bottom-bar: 50;
    --z-sidebar:    60;
    --z-header:     70;
    --z-dropdown:   80;
    --z-toast:      9000;
    --z-modal:      9500;

    /* ─── Compat com cliente.css legado ──────────────────────────── */
    --primary-color: var(--brand-600);
    --primary-dark:  var(--brand-800);
    --secondary-color: var(--ink-900);
    --success-color: var(--success);
    --warning-color: var(--warning);
    --info-color:    var(--info);
    --light-color:   var(--ink-50);
    --dark-color:    var(--ink-800);
    --border-radius: var(--r-md);
    --box-shadow:    var(--shadow-2);
    --transition:    var(--t-base);
}

/* ─── Global reset & body ───────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ink-800);
    letter-spacing: var(--tracking-base);
    background-color: var(--surface-app);
}

/* ─── Scrollbar ─────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--ink-300);
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: padding-box; border: 2px solid transparent; }

/* ─── Focus ─────────────────────────────────────────────────────── */
:where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--ring-brand);
    border-color: var(--brand-500) !important;
}

/* ─── Animation utilities ───────────────────────────────────────── */
@keyframes ds-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ds-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ds-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0.5); }
    70%      { box-shadow: 0 0 0 14px rgba(var(--brand-rgb), 0); }
}
@keyframes ds-pulse-mint {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 211, 151, 0.5); }
    70%      { box-shadow: 0 0 0 12px rgba(30, 211, 151, 0); }
}
@keyframes ds-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ds-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ds-fade-in   { animation: ds-fade-in   var(--t-slow); }
.ds-pop-in    { animation: ds-pop-in    var(--t-spring); }
.ds-slide-up  { animation: ds-slide-up  var(--t-slow); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}