/* ==========================================================================
   BOCÃO — Design Tokens (CSS Custom Properties)
   v1.0.0 — 2026-07-22
   Fonte única de verdade em runtime. Espelha tokens/tokens.json.
   Uso: importe este arquivo ANTES de qualquer outro CSS.
   ========================================================================== */

:root {
  /* ---------- Marca ---------- */
  --bc-yellow: #FFC91E;
  --bc-gold: #F0A500;
  --bc-gold-deep: #B87400;
  --bc-black: #050505;
  --bc-red: #E12B1E;
  --bc-crust: #E7B96B;
  --bc-cheese: #FFC93C;

  /* ---------- Escala amarelo/ouro ---------- */
  --bc-yellow-50:  #FFF9E0;
  --bc-yellow-100: #FFF0B8;
  --bc-yellow-200: #FFE485;
  --bc-yellow-300: #FFD84F;
  --bc-yellow-400: #FFC91E;
  --bc-yellow-500: #F0A500;
  --bc-yellow-600: #D18F00;
  --bc-yellow-700: #B87400;
  --bc-yellow-800: #8A5700;
  --bc-yellow-900: #5C3A00;

  /* ---------- Neutros ---------- */
  --bc-neutral-0:   #FFFFFF;
  --bc-neutral-50:  #F7F7F5;
  --bc-neutral-100: #EDEDEA;
  --bc-neutral-200: #D6D6D2;
  --bc-neutral-300: #B0B0AB;
  --bc-neutral-400: #87877F;
  --bc-neutral-500: #5E5E58;
  --bc-neutral-600: #42423E;
  --bc-neutral-700: #2A2A27;
  --bc-neutral-800: #181816;
  --bc-neutral-900: #0D0D0C;
  --bc-neutral-950: #050505;

  /* ---------- Semânticos ---------- */
  --bc-success: #25D366;   /* verde WhatsApp */
  --bc-success-dark: #128C4A;
  --bc-warning: #FFB020;
  --bc-danger:  #E12B1E;
  --bc-info:    #3B9DDD;

  /* ---------- Superfícies (dark-first, padrão da marca) ---------- */
  --bc-surface-canvas:  var(--bc-neutral-950);
  --bc-surface-raised:  var(--bc-neutral-800);
  --bc-surface-overlay: var(--bc-neutral-700);

  /* ---------- Texto ---------- */
  --bc-text-primary:   var(--bc-neutral-0);
  --bc-text-secondary: var(--bc-neutral-300);
  --bc-text-muted:     var(--bc-neutral-400);
  --bc-text-accent:    var(--bc-yellow);
  --bc-text-on-yellow: var(--bc-neutral-950); /* NUNCA branco sobre amarelo */

  /* ---------- Bordas ---------- */
  --bc-border-subtle:  rgba(255, 255, 255, 0.10);
  --bc-border-default: rgba(255, 255, 255, 0.18);
  --bc-border-strong:  var(--bc-yellow);
  --bc-border-focus:   var(--bc-yellow);

  /* ---------- Gradientes ---------- */
  --bc-gradient-gold-button: linear-gradient(180deg, #FFD84F 0%, #F0A500 52%, #B87400 100%);
  --bc-gradient-gold-text:   linear-gradient(180deg, #FFD84F 0%, #F0A500 100%);
  --bc-gradient-fade-black:  linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.92) 78%, #050505 100%);

  /* ---------- Tipografia ---------- */
  --bc-font-display: 'Anton', 'Archivo Black', Impact, sans-serif;
  --bc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bc-font-script: 'Kaushan Script', cursive;

  --bc-fw-regular: 400;
  --bc-fw-medium: 500;
  --bc-fw-semibold: 600;
  --bc-fw-bold: 700;
  --bc-fw-black: 900;

  --bc-fs-xs: 0.75rem;
  --bc-fs-sm: 0.875rem;
  --bc-fs-base: 1rem;
  --bc-fs-lg: 1.125rem;
  --bc-fs-xl: 1.375rem;
  --bc-fs-2xl: 1.75rem;
  --bc-fs-3xl: 2.25rem;
  --bc-fs-4xl: 3rem;
  --bc-fs-5xl: 4rem;
  --bc-fs-6xl: 5.5rem;

  --bc-lh-tight: 0.95;
  --bc-lh-snug: 1.15;
  --bc-lh-normal: 1.5;
  --bc-lh-relaxed: 1.7;

  --bc-ls-tighter: -0.02em;
  --bc-ls-normal: 0;
  --bc-ls-wide: 0.04em;
  --bc-ls-wider: 0.14em;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --bc-space-0: 0;
  --bc-space-1: 0.25rem;
  --bc-space-2: 0.5rem;
  --bc-space-3: 0.75rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.25rem;
  --bc-space-6: 1.5rem;
  --bc-space-8: 2rem;
  --bc-space-10: 2.5rem;
  --bc-space-12: 3rem;
  --bc-space-16: 4rem;
  --bc-space-20: 5rem;
  --bc-space-24: 6rem;

  /* ---------- Raio ---------- */
  --bc-radius-sm: 6px;
  --bc-radius-md: 10px;
  --bc-radius-lg: 16px;
  --bc-radius-xl: 24px;
  --bc-radius-pill: 999px;
  --bc-radius-full: 50%;

  /* ---------- Sombra ---------- */
  --bc-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --bc-shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --bc-shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  --bc-shadow-glow: 0 0 24px rgba(255,201,30,0.45);
  --bc-shadow-cta: 0 6px 0 #8A5700, 0 10px 20px rgba(0,0,0,0.55);

  /* ---------- Movimento ---------- */
  --bc-duration-fast: 120ms;
  --bc-duration-normal: 200ms;
  --bc-duration-slow: 360ms;
  --bc-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --bc-ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --bc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Camadas ---------- */
  --bc-z-dropdown: 1000;
  --bc-z-sticky: 1100;
  --bc-z-overlay: 1200;
  --bc-z-modal: 1300;
  --bc-z-toast: 1400;
}

/* --------------------------------------------------------------------------
   Modo claro — use em telas de leitura longa (cardápio completo, checkout,
   painel administrativo). O restante da marca permanece dark-first.
   Aplique com <div data-theme="light"> ou :root[data-theme="light"].
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --bc-surface-canvas:  var(--bc-neutral-0);
  --bc-surface-raised:  var(--bc-neutral-50);
  --bc-surface-overlay: var(--bc-neutral-100);

  --bc-text-primary:   var(--bc-neutral-900);
  --bc-text-secondary: var(--bc-neutral-600);
  --bc-text-muted:     var(--bc-neutral-500);
  --bc-text-accent:    var(--bc-yellow-700); /* ouro escuro: o amarelo puro não lê sobre branco */

  --bc-border-subtle:  rgba(0, 0, 0, 0.08);
  --bc-border-default: rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bc-duration-fast: 0ms;
    --bc-duration-normal: 0ms;
    --bc-duration-slow: 0ms;
  }
}