/* ============================================================
   DELIVON — DESIGN TOKENS
   Fonte única da verdade visual. Paleta, espaçamento, raios,
   sombras, tipografia, transições e breakpoints do produto.
   ============================================================ */

:root {
  /* ---- DELIVON — IDENTIDADE (dark-first: preto + laranja) ---- */
  --delivon-bg: #080808;          /* fundo geral */
  --delivon-sidebar: #111111;     /* menu lateral, seções escuras */
  --delivon-surface: #1B1B1B;     /* grafite: cards, painéis, modais */
  --delivon-border: #333333;      /* bordas e divisórias */
  --delivon-primary: #FF5A00;     /* laranja vibrante: ações e destaques */
  --delivon-hover: #FF8A00;       /* laranja energético: hover e indicadores */
  --delivon-gold: #FFB000;        /* dourado: alertas e gradientes */
  --delivon-burnt: #D93800;       /* laranja queimado: estados ativos e erros */
  --delivon-silver: #D9DDE2;      /* prata metálica: elementos neutros */
  --delivon-text: #F5F5F5;        /* branco gelo: títulos e textos */
  --delivon-muted: #A3A3A3;       /* textos secundários */

  /* ---- SEMÂNTICAS (estados) ---- */
  --delivon-success: #22A06B;
  --delivon-warning: #FFB000;
  --delivon-danger: #D93800;

  /* ---- DERIVADOS (transparências p/ uso direto) ---- */
  --delivon-primary-08: rgba(255, 90, 0, 0.08);
  --delivon-primary-12: rgba(255, 90, 0, 0.12);
  --delivon-primary-16: rgba(255, 90, 0, 0.16);
  --delivon-hover-14: rgba(255, 138, 0, 0.14);
  --delivon-danger-14: rgba(217, 56, 0, 0.14);
  --delivon-warning-14: rgba(255, 176, 0, 0.14);
  --delivon-success-14: rgba(34, 160, 107, 0.14);

  /* ============================================================
     TEMA DO SISTEMA (bridge com o motor dinâmico do painel —
     o tema configurável sobrescreve --brand-* por loja)
     ============================================================ */
  --brand-hue: 40;
  --brand-l: 68%;
  --brand-c: 0.214;
  --teal: oklch(var(--brand-l) var(--brand-c) var(--brand-hue)); /* primária */
  --teal-strong: oklch(calc(var(--brand-l) + 11%) calc(var(--brand-c) + 0.016) var(--brand-hue));
  --ink: #080808; /* texto sobre a cor de marca (recalculado pelo tema) */

  /* ---- SPACING (escala 4px) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- BORDER RADIUS ---- */
  --radius-xs: 6px;    /* chips pequenos, tags internas */
  --radius-sm: 8px;    /* inputs, botões compactos */
  --radius-md: 12px;   /* botões, badges expansivos */
  --radius-lg: 16px;   /* cards, modais */
  --radius-xl: 22px;   /* hero, painéis destacados */
  --radius-full: 999px;/* avatares, pills, toggles */

  /* ---- SOMBRAS (profundidade moderada — 2026, não 2016) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.50);
  --shadow-brand: 0 6px 18px rgba(255, 90, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(255, 138, 0, 0.30);

  /* ---- TYPOGRAPHY ---- */
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;

  --text-2xs: 0.6875rem;   /* 11px — labels mínimos */
  --text-xs: 0.75rem;      /* 12px — captions, badges */
  --text-sm: 0.8125rem;    /* 13px — texto denso de tabela */
  --text-base: 0.9375rem;  /* 15px — corpo */
  --text-md: 1.0625rem;    /* 17px — corpo enfático */
  --text-lg: 1.25rem;      /* 20px — subtítulos */
  --text-xl: 1.5rem;        /* 24px — títulos de página */
  --text-2xl: 1.875rem;    /* 30px — KPI hero */
  --text-3xl: 2.5rem;      /* 40px — display */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ---- TRANSITIONS ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Z-INDEX ---- */
  --z-dropdown: 40;
  --z-sticky: 50;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 80;

  /* ---- BREAKPOINTS (referência de design; aplicadas em media queries) ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ============================================================
   RECIPES DE USO RÁPIDO (padrões que se repetem no produto)
   Proporção de cor: 70% neutros escuros, 20% laranja, 10% dourado/prata.
   ============================================================ */
.delivon-surface { background: var(--delivon-surface); border: 1px solid var(--delivon-border); border-radius: var(--radius-lg); }
.delivon-kpi-valor { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--delivon-text); letter-spacing: var(--tracking-tight); }
.delivon-badge-success { color: var(--delivon-success); background: var(--delivon-success-14); border-radius: var(--radius-full); padding: 2px 10px; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.delivon-badge-danger { color: var(--delivon-danger); background: var(--delivon-danger-14); border-radius: var(--radius-full); padding: 2px 10px; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.delivon-badge-warning { color: var(--delivon-warning); background: var(--delivon-warning-14); border-radius: var(--radius-full); padding: 2px 10px; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.delivon-badge-brand { color: var(--delivon-primary); background: var(--delivon-primary-12); border-radius: var(--radius-full); padding: 2px 10px; font-size: var(--text-xs); font-weight: var(--weight-bold); }