/* ================================================================
   DESIGN SYSTEM — FONTE ÚNICA DA VERDADE
   ================================================================
   Este arquivo substitui os ~16 blocos :root duplicados que
   existiam espalhados em template/, gerenciador/, kanban/,
   cozinha/, tv/ e assets/ — cada um com valores levemente
   diferentes para as mesmas cores/espaçamentos/sombras.

   ESTRUTURA:
     1. Tokens canônicos (cor, espaço, raio, sombra, tipografia)
     2. Aliases de compatibilidade (nomes antigos usados no código
        existente: --ifood-red, --ink-900, --bg, --surface, etc.)
        para que NENHUM CSS/PHP existente precise ser reescrito
        só por causa de nome de variável.
     3. Reset leve
     4. Componentes-base reutilizáveis (botões, inputs, cards,
        tabelas, badges, alerts, modais) no padrão
        Stripe/Linear/Notion/Vercel.

   COMO USAR:
     Inclua este arquivo ANTES de qualquer outro CSS da página:
     <link rel="stylesheet" href="/assets/css/design-system.css">

   NÃO DUPLICAR blocos :root em outros arquivos. Se precisar de uma
   variável nova, adicione aqui.
   ================================================================ */

/* ----------------------------------------------------------------
   1. TOKENS CANÔNICOS
---------------------------------------------------------------- */
:root {
  /* Marca (vermelho iFood-like usado em todo o sistema) */
  --primary: #ea1d2c;
  --primary-dark: #c21828;
  --primary-light: #ffebee;
  --primary-rgb: 234, 29, 44;

  /* Escala neutra (slate) — a mais usada no código já existente */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  /* Semânticas */
  --success:       #10b981;
  --success-dark:  #059669;
  --success-light: #d1fae5;
  --success-ink:   #065f46;

  --warning:       #f59e0b;
  --warning-dark:  #d97706;
  --warning-light: #fef3c7;
  --warning-ink:   #92400e;

  --danger:        #ef4444;
  --danger-dark:   #dc2626;
  --danger-light:  #fee2e2;
  --danger-ink:    #991b1b;

  --info:          #3b82f6;
  --info-dark:     #2563eb;
  --info-light:    #dbeafe;

  /* Escala azul completa (50→950) — --info/--info-dark acima continuam
     sendo os aliases "oficiais" já usados no código; esta escala existe
     pra quem precisar de mais variação de intensidade (ex.: badges,
     estados hover) sem inventar um azul novo cada vez. --blue-600 é o
     mesmo valor de --info-dark (#2563EB). */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  /* Fundos e superfícies */
  --bg-primary: #f8fafc;
  --bg-card:    #ffffff;
  --bg-surface: #ffffff;

  /* Espaçamento (escala 4px) */
  --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;

  /* Raios padronizados */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Sombras discretas (soft UI) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), 0.25);

  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala tipográfica — razão 1.333 ("perfect fourth"), base 1rem/16px.
     Objetivo: parar de espalhar font-size solto (.6rem, .62rem, .68rem,
     .72rem, .78rem, .82rem, .85rem, .92rem, .95rem, 1.05rem, 1.1rem...)
     pelos arquivos — cada tamanho novo devia ser um passo desta escala,
     não um valor inventado na hora. Onde precisar fluir suave entre
     breakpoints (títulos grandes), combine com clamp() usando estes
     tokens como os extremos, ex.: font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)).
       xs   = 12.0px   (rodapé, legendas, metadados de baixa prioridade)
       sm   = 14.0px   (texto secundário, badges)
       base = 16.0px   (corpo padrão)
       lg   = 18.7px   (destaque leve, subtítulo de card)
       xl   = 21.3px   (título de card, valor em destaque)
       2xl  = 28.4px   (título de seção)
       3xl  = 37.9px   (número grande / hero de painel) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.174rem;
  --text-xl:   1.333rem;
  --text-2xl:  1.777rem;
  --text-3xl:  2.369rem;

  /* Breakpoints — documentação/uso em JS (matchMedia), já que @media não
     lê custom property. As media queries do projeto devem usar estes
     mesmos números escritos por extenso (ver cozinha/css/tela.css para
     um exemplo já convertido). Alinhado ao padrão de mercado (Tailwind). */
  --bp-sm: 640px;   /* celular grande / phablet */
  --bp-md: 768px;   /* tablet retrato */
  --bp-lg: 1024px;  /* tablet paisagem / notebook pequeno */
  --bp-xl: 1280px;  /* desktop / TV de cozinha */

  /* Transições suaves (nunca exageradas) */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout comum (admin/kanban) */
  --sidebar-width: 260px;
  --header-height: 64px;
  --max-content-width: 1400px;

  /* Áreas seguras (mobile) */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Camadas (z-index) — uma escala única para todo o sistema */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1100;
}

/* ----------------------------------------------------------------
   2. ALIASES DE COMPATIBILIDADE
   Mantêm funcionando o CSS já existente que usa outros nomes,
   sem precisar reescrever cada arquivo agora.
---------------------------------------------------------------- */
:root {
  /* gerenciador/css/pages/topo.css, home.css */
  --ifood-red: var(--primary);
  --ifood-dark: var(--primary-dark);
  --ifood-light: var(--primary-light);
  --font-family: var(--font-sans);
  --sidebar-w: var(--sidebar-width);

  /* kanban/css/pdv.css e afins */
  --bg: var(--bg-primary);
  --surface: var(--bg-card);
  --border: var(--gray-200);
  --text: var(--gray-900);
  --text-secondary: var(--gray-500);
  --dark: var(--gray-800);

  /* template/css/checkout.css */
  --brand: var(--primary);
  --ink-900: var(--gray-900);
  --ink-700: var(--gray-700);
  --ink-500: var(--gray-500);
  --ink-400: var(--gray-400);
  --ink-200: var(--gray-200);
  --ink-100: var(--gray-100);
  --ink-50:  var(--gray-50);
  --success-bg: var(--success-light);
  --warning-bg: var(--warning-light);
  --danger-bg: var(--danger-light);
  --info-bg: var(--info-light);

  /* template/css/style.css usava "error" em vez de "danger" */
  --error: var(--danger);

  /* Aliases genéricos (sem sufixo) usados em vários CSS do admin/kanban */
  --radius: var(--radius-md);
  --radius-xs: 6px;
  --shadow: var(--shadow-sm);
  --transition: var(--transition-base);
  --primary-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));

  /* gerenciador/css/pages/dadosempresa.css */
  --brand-light: var(--primary-light);
  --brand-dark: var(--primary-dark);
  --text-1: var(--gray-900);
  --text-2: var(--gray-500);
  --text-3: var(--gray-400);

  /* Usados em várias páginas do admin (categorias, grupos, cupons, etc.) */
  --red: var(--ifood-red);
  --red-dark: var(--ifood-dark);
  --red-light: var(--ifood-light);
  --green: var(--success);
  --green-light: var(--success-light);

  /* template/css/pages/pedido.css e produtom.css usavam estes nomes
     sem nunca defini-los em lugar nenhum (bug pré-existente) */
  --bg-hover: var(--gray-100);
  --bg-secondary: var(--gray-50);
  --border-color: var(--gray-200);
  --text-muted: var(--gray-500);
  --text-primary: var(--gray-900);
}

/* ----------------------------------------------------------------
   3. RESET LEVE
---------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--gray-900);
  line-height: 1.5;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; font-size: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* Foco de teclado sempre visível — acessibilidade */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--primary-light); color: var(--primary-dark); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ----------------------------------------------------------------
   4. COMPONENTES-BASE
---------------------------------------------------------------- */

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
  min-height: 44px; /* área clicável acessível */
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-md); }

.btn-secondary { background: var(--gray-100); color: var(--gray-800); }
.btn-secondary:hover { background: var(--gray-200); }

.btn-outline { background: transparent; border-color: var(--gray-300); color: var(--gray-700); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); }

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8125rem; min-height: 36px; }
.btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; min-height: 52px; }
.btn-icon { padding: 0.625rem; min-width: 44px; }

/* --- Inputs --- */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.form-control,
.form-input,
input[type="text"].input,
input[type="email"].input,
input[type="tel"].input,
input[type="number"].input,
select.input,
textarea.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--gray-900);
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 44px;
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:hover { border-color: var(--gray-300); }
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}
.form-control.is-invalid { border-color: var(--danger); }
.form-error { font-size: 0.75rem; color: var(--danger); margin-top: var(--space-1); }

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-header { padding: var(--space-5); border-bottom: 1px solid var(--gray-100); }
.card-body { padding: var(--space-5); }
.card-footer { padding: var(--space-5); border-top: 1px solid var(--gray-100); }

/* Glassmorphism leve — para overlays/headers flutuantes */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* --- Tabelas --- */
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
}
.table tbody tr { transition: background-color var(--transition-fast); }
.table tbody tr:hover { background: var(--gray-50); }

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1.6;
}
.badge-success { background: var(--success-light); color: var(--success-ink); }
.badge-warning { background: var(--warning-light); color: var(--warning-ink); }
.badge-danger  { background: var(--danger-light);  color: var(--danger-ink); }
.badge-info    { background: var(--info-light);    color: var(--info-dark); }
.badge-neutral { background: var(--gray-100); color: var(--gray-600); }

/* --- Alertas --- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.875rem;
}
.alert-success { background: var(--success-light); color: var(--success-ink); border-color: rgba(16,185,129,0.25); }
.alert-warning { background: var(--warning-light); color: var(--warning-ink); border-color: rgba(245,158,11,0.25); }
.alert-danger  { background: var(--danger-light);  color: var(--danger-ink);  border-color: rgba(239,68,68,0.25); }
.alert-info    { background: var(--info-light);    color: var(--info-dark);   border-color: rgba(59,130,246,0.25); }

/* --- Modais --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal-backdrop);
  animation: fadeIn var(--transition-base) ease-out;
}
.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  animation: scaleIn var(--transition-base) ease-out;
}
.modal-header { padding: var(--space-5); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: var(--space-5); }
.modal-footer { padding: var(--space-5); border-top: 1px solid var(--gray-100); display: flex; gap: var(--space-3); justify-content: flex-end; }

/* --- Animações leves --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.fade-in { animation: fadeIn var(--transition-base) ease-out; }
.scale-in { animation: scaleIn var(--transition-base) ease-out; }

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

/* --- Utilitários de responsividade --- */
.container-fluid { width: 100%; padding-inline: clamp(1rem, 4vw, 2.5rem); margin-inline: auto; max-width: var(--max-content-width); }

/* ----------------------------------------------------------------
   5. UTILITÁRIOS DE ESPAÇAMENTO E TIPOGRAFIA
   Classes geradas a partir dos tokens acima (--space-*, --text-*).
   Formato plano (CSS puro), não SCSS: este projeto não tem etapa de
   build/compilação (PHP servindo .css direto), então um mapa Sass com
   @each nunca chegaria a virar CSS de verdade no navegador — o
   "compatível" aqui é gerar o resultado já expandido uma vez, do
   jeito que o projeto consegue de fato servir.
---------------------------------------------------------------- */
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }

.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }

.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }

.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }

.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }

.text-xs   { font-size: var(--text-xs)   !important; }
.text-sm   { font-size: var(--text-sm)   !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg   { font-size: var(--text-lg)   !important; }
.text-xl   { font-size: var(--text-xl)   !important; }
.text-2xl  { font-size: var(--text-2xl)  !important; }
.text-3xl  { font-size: var(--text-3xl)  !important; }