:root {

    /* ===========================
       CORES DO RESTAURANTE
    =========================== */

    --primary: #ff6b00;
    --primary-light: #ff8a33;
    --primary-dark: #cc5500;
    --primary-hover: #e65f00;

    --secondary: #111827;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;

    /* ===========================
       TEMA CLARO
    =========================== */

    --background: #f6f8fb;
    --surface: #ffffff;
    --surface-hover: #f3f4f6;

    --border: #e5e7eb;

    --text: #111827;
    --text-light: #6b7280;
    --text-white: #ffffff;

    --overlay: rgba(0,0,0,.55);

    --disabled: #cbd5e1;
    --skeleton: #e5e7eb;

    /* ===========================
       STATUS
    =========================== */

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* ===========================
       SOMBRAS
    =========================== */

    --shadow-xs: 0 1px 3px rgba(0,0,0,.05);
    --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.12);
    --shadow-xl: 0 28px 70px rgba(0,0,0,.18);

    /* ===========================
       BORDAS
    =========================== */

    --radius-2xs: 4px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ===========================
       ESPAÇAMENTOS
    =========================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* ===========================
       TIPOGRAFIA
    =========================== */

    --font-family: "Inter", sans-serif;

    --font-xs: .75rem;
    --font-sm: .875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.35rem;
    --font-2xl: 1.75rem;
    --font-3xl: 2.25rem;
    --font-4xl: 2.75rem;
    --font-5xl: 3.5rem;

    /* ===========================
       PESOS
    =========================== */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* ===========================
       LAYOUT
    =========================== */

    --header-height: 72px;
    --header-mobile: 64px;

    --container: 1280px;

    --safe-bottom: env(safe-area-inset-bottom);

    /* ===========================
       Z-INDEX
    =========================== */

    --z-dropdown: 1000;
    --z-header: 2000;
    --z-sticky: 3000;
    --z-cart: 5000;
    --z-modal: 7000;
    --z-toast: 9000;
    --z-loader: 9999;

    /* ===========================
       ANIMAÇÕES
    =========================== */

    --transition-fast: .15s ease;
    --transition: .25s ease;
    --transition-slow: .4s ease;

    --transition-bounce: .35s cubic-bezier(.34,1.56,.64,1);
    --transition-smooth: .45s cubic-bezier(.22,.61,.36,1);

}

/* ==================================================
   TEMA ESCURO
================================================== */

[data-theme="dark"] {

    --background: #0f172a;

    --surface: #182234;

    --surface-hover: #243247;

    --border: #334155;

    --text: #f8fafc;

    --text-light: #94a3b8;

    --overlay: rgba(0,0,0,.72);

    --disabled: #475569;

    --skeleton: #334155;

    --shadow-xs: 0 1px 3px rgba(0,0,0,.30);

    --shadow-sm: 0 4px 12px rgba(0,0,0,.35);

    --shadow-md: 0 8px 24px rgba(0,0,0,.40);

    --shadow-lg: 0 18px 40px rgba(0,0,0,.45);

    --shadow-xl: 0 28px 70px rgba(0,0,0,.55);

}