/*
LA PANINI SAAS - DESIGN TOKENS
Etapa 1: Fundação Visual e Design Tokens
Paleta Fogo & Brasa (The Ember & Ash Palette)
*/

/* ===== CORES ===== */
:root {
  /* Fundo e superfícies */
  --color-bg-main: #0D0B0A;          /* Fundo Principal da Aplicação */
  --color-bg-sidebar: #12100E;       /* Background da Sidebar Lateral */
  --color-surface-primary: #181411;  /* Cards Principais e Tabelas */
  --color-surface-secondary: #211A16;/* Superfícies Secundárias / Modais */
  --color-border: #342A24;           /* Linhas, Divisores e Bordas Discretas */

  /* Destaque e texto */
  --color-accent: #FF681F;           /* Destaque Principal (Laranja-Brasa) */
  --color-text-primary: #FFF8F1;     /* Texto Principal */
  --color-text-secondary: #A8998E;   /* Texto Secundário / Subtítulos */

  /* Cores Utilitárias de Operação (Status) */
  --color-success: #10B981;          /* Verde: Loja aberta, indicadores positivos */
  --color-warning: #F59E0B;          /* Amarelo/Âmbar: Alertas, estoque mínimo */
  --color-info: #3B82F6;             /* Azul: Pedidos em preparação na cozinha */
  --color-error: #EF4444;            /* Vermelho: Erros, recusas, exclusões destrutivas */
}

/* ===== ALIASES COMPATÍVEIS (achados A-05/A-06 da auditoria de 21/10/2026) =====
   O admin.css usava 11 tokens que viviam apenas no css/style.css (o CSS da
   LOJA). Isso obrigava o painel a carregar 89 KB de CSS da vitrine — e os
   dois arquivos tinham regras IGUAIS (.btn, .card, .modal, .drawer, .toast,
   .chip, .field), cuja colisão era decidida pela ordem de carregamento.
   Agora os aliases vivem AQUI, e o admin.html não carrega mais o style.css.
   ============================================================================ */
:root {
  /* Superfícies e texto (alias dos tokens --color-*) */
  --surface:   #1A1410;
  --surface-2: #241B14;
  --cards-bg:  #1A1410;
  --text:      #F6E9DC;
  --muted:     #A99A8A;
  --brand:     #F26B21;
  --border-soft: rgba(230, 200, 170, 0.08);
  --overlay:   rgba(5, 4, 3, 0.72);

  /* Tipografia e movimento */
  --font-head: 'Anton SC', Impact, sans-serif;
  --ease:      cubic-bezier(.22, .8, .32, 1);
}

/* ===== TIPOGRAFIA ===== */
:root {
  /* Fontes obrigatórias */
  --font-family-heading: 'Barlow Condensed', sans-serif; /* Títulos, Números, Métricas */
  --font-family-body: 'DM Sans', sans-serif;            /* Textos corridos, formulários */

  /* Pesos de fonte (ajustar conforme disponibilidade nas fontes) */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Tamanhos de fonte */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */

  /* Alturas de linha */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* Espaçamento de letras para texto em UPPERCASE */
  --letter-spacing-condensed: 0.05em; /* Para Barlow Condensed em caixa alta */
  --letter-spacing-normal: 0;         /* Para DM Sans */
}

/* ===== ESPESSAMENTO ===== */
:root {
  /* Sistema de 4px - base para espaçamento consistente */
  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem;  /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem;    /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem;  /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem;    /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem;   /* 48px */
  --spacing-16: 4rem;   /* 64px */
  --spacing-20: 5rem;   /* 80px */
}

/* ===== EFEITOS ===== */
:root {
  /* Sombras - níveis de elevação */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Raio de borda - ESTRICTAMENTE entre 10px e 12px */
  --radius-none: 0;
  --radius-sm: 0.625rem;   /* 10px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 0.875rem;   /* 14px - usar apenas se absolutamente necessário */
  --radius-pill: 1.25rem;  /* 20px - para elementos alongados */
  --radius-full: 9999px;

  /* Opacidade para estados */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.9;
  --opacity-focus: 0.95;
  --opacity-overlay: 0.85; /* Para modais e drawers */
}

/* ===== UTILIDADES DE TEXTO ===== */
/*
  Note: The --text-heading and --text-body utilities were removed as they contained invalid CSS syntax.
  To apply typography rules, use the individual token variables directly as shown in the documentation.
*/

/* ===== ESTADOS ===== */
/*
  Note: The --state-* utilities were removed as they contained invalid CSS syntax.
  To apply state styles, use the individual token variables directly in classes as shown in the documentation.
  Example:
  .status-success {
    background-color: var(--color-success);
    color: var(--color-bg-main);
  }
  */

/* ===== RESET BÁSICO ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family-body);
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body { overflow-x: clip; }