/* ==========================================================================
   Canaã EPIs — design tokens (ADR 0018, Direção "Confiança Técnica")

   Rampas neutra e primária geradas em OKLCH (hue fixo, croma quase-zero para
   o neutro) e convertidas para sRGB — por isso o contraste entre passos é
   prescindível de checagem manual a cada par novo. A tabela de contraste dos
   pares realmente em uso está em docs/design/tres-direcoes-visuais.md.

   Carregar ANTES de theme.css. Os aliases semânticos (--bg, --surface,
   --text, --primary...) trocam de valor com data-bs-theme; o restante do
   site consome só os aliases, nunca a rampa bruta diretamente.
   ========================================================================== */

:root {
  /* ---- Rampa neutra (grafite quente, hue 60°) ---- */
  --canaa-neutral-50: #fbf8f6;
  --canaa-neutral-100: #f1eeeb;
  --canaa-neutral-200: #e1ddda;
  --canaa-neutral-300: #c8c3c0;
  --canaa-neutral-400: #a8a3a0;
  --canaa-neutral-500: #8a8581;
  --canaa-neutral-600: #6d6863;
  --canaa-neutral-700: #524c47;
  --canaa-neutral-800: #38322d;
  --canaa-neutral-900: #1f1915;
  --canaa-neutral-950: #100a06;

  /* ---- Rampa primária (âmbar de marca, hue 88°) ---- */
  --canaa-primary-50: #fef8ea;
  --canaa-primary-100: #faeed1;
  --canaa-primary-200: #f4dca1;
  --canaa-primary-300: #e4c062;
  --canaa-primary-400: #cc9d00;
  --canaa-primary-500: #b07c00;
  --canaa-primary-600: #905f00;
  --canaa-primary-700: #6f4300;
  --canaa-primary-800: #4c2b00;
  --canaa-primary-900: #2c1500;
  --canaa-primary-950: #150800;

  /* ---- Tipografia: uma família só (stack nativa), duas escalas de peso ---- */
  --canaa-font-display: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --canaa-font-body: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --canaa-fs-xs: 0.75rem;
  --canaa-fs-sm: 0.875rem;
  --canaa-fs-body: 1rem;
  --canaa-fs-lg: 1.125rem;
  --canaa-fs-h4: 1.25rem;
  --canaa-fs-h3: 1.5rem;
  --canaa-fs-h2: 2rem;
  --canaa-fs-h1: 2.5rem;

  --canaa-lh-tight: 1.2;
  --canaa-lh-body: 1.6;

  /* ---- Espaçamento: múltiplos de 4px, sem exceção ---- */
  --canaa-space-1: 4px;
  --canaa-space-2: 8px;
  --canaa-space-3: 12px;
  --canaa-space-4: 16px;
  --canaa-space-5: 24px;
  --canaa-space-6: 32px;
  --canaa-space-7: 40px;
  --canaa-space-8: 64px;

  /* ---- Raio (médio — evolução do Bootstrap atual, não ruptura) ---- */
  --canaa-radius-sm: 6px;
  --canaa-radius-md: 10px;
  --canaa-radius-lg: 14px;
  --canaa-radius-pill: 999px;

  /* ---- Movimento ---- */
  --canaa-transition-fast: 0.15s ease;
  --canaa-transition-base: 0.25s ease;

  /* ---- Fundo de foto de produto: branco fixo em qualquer tema, de
     propósito — a maioria das fotos tem fundo branco/transparente, e um
     fundo escuro faria a foto "flutuar" de forma inconsistente no tema
     escuro (padrão comum de vitrine online). ---- */
  --canaa-photo-canvas: #ffffff;

  /* ---- Bootstrap: raio e sombra vêm da escala acima, uma vez só ----
     Todo componente do Bootstrap (card, button, badge, modal, accordion,
     pagination, dropdown, toast, alert...) deriva o próprio raio de
     --bs-border-radius(-sm/-lg) — remapear aqui evita reescrever raio
     componente a componente. */
  --bs-border-radius: var(--canaa-radius-md);
  --bs-border-radius-sm: var(--canaa-radius-sm);
  --bs-border-radius-lg: var(--canaa-radius-lg);
  --bs-border-radius-xl: var(--canaa-radius-lg);
  --bs-border-radius-pill: var(--canaa-radius-pill);
  --bs-box-shadow: var(--shadow-panel, 0 1rem 3rem rgba(0, 0, 0, 0.175));
  --bs-box-shadow-sm: var(--shadow-card, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
  --bs-box-shadow-lg: var(--shadow-panel, 0 1rem 3rem rgba(0, 0, 0, 0.175));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --canaa-transition-fast: 0.001s;
    --canaa-transition-base: 0.001s;
  }
}

/* --- Aliases semânticos: claro é o padrão de marca, escuro é opt-in --------
   Selector SEM qualificador de tag (igual ao próprio Bootstrap): navbar,
   topbar, footer e as faixas sempre-escuras (benefits/cta-band) marcam
   data-bs-theme="dark" em si mesmos, não em <html> — o alias precisa valer
   nesses escopos aninhados mesmo quando a página está em modo claro. */
[data-bs-theme="dark"] {
  --bg: var(--canaa-neutral-950);
  --surface: var(--canaa-neutral-900);
  --surface-2: var(--canaa-neutral-800);
  --border: var(--canaa-neutral-700);
  --border-strong: var(--canaa-neutral-600);
  --text: var(--canaa-neutral-50);
  --text-muted: var(--canaa-neutral-300);

  --primary: var(--canaa-primary-400);
  --primary-hover: var(--canaa-primary-300);
  --primary-active: var(--canaa-primary-500);
  --on-primary: var(--canaa-neutral-950);

  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 8px 28px rgba(0, 0, 0, 0.45);
  /* Foco (UX-058): anel sólido de 2px; âmbar 400 sobre o fundo escuro ≈ 7,8:1. */
  --focus-ring: var(--canaa-primary-400);
  --shadow-focus: 0 0 0 2px var(--focus-ring);

  --status-success-text: #7acf7e;
  --status-success-bg: #002804;
  --status-warning-text: #fb9d59;
  --status-warning-bg: #391100;
  --status-danger-text: #ff8a82;
  --status-danger-bg: #400507;
  --status-info-text: #6ec3eb;
  --status-info-bg: #002334;

  /* Bootstrap neutrals: card/table/modal/dropdown/accordion/pagination all
     read these instead of Bootstrap's own gray scale — one remap covers
     every component built on top of Bootstrap in both apps. */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-secondary-border-subtle: var(--border);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  /* Várias regras do Bootstrap (a{}, hover de dropdown-item/list-group,
     opacidade de borda/texto) leem a versão -rgb via rgba(), não o hex
     sozinho — sem isto elas continuam na escala de cinza padrão. */
  --bs-body-bg-rgb: 16, 10, 6; /* --canaa-neutral-950 */
  --bs-body-color-rgb: 251, 248, 246; /* --canaa-neutral-50 */
  --bs-emphasis-color-rgb: 251, 248, 246;
  --bs-secondary-bg-rgb: 56, 50, 45; /* --canaa-neutral-800 */
  --bs-tertiary-bg-rgb: 56, 50, 45;
  --bs-link-color-rgb: 204, 157, 0; /* --canaa-primary-400 */
  --bs-link-hover-color-rgb: 228, 192, 98; /* --canaa-primary-300 */

  /* Superfícies elevadas (cartão, modal, dropdown, acordeão, toast, popover)
     usam --surface, um tom acima de --bs-body-bg — por padrão o Bootstrap
     reaproveitaria a cor do fundo da página, achatando a hierarquia visual. */
  --bs-card-bg: var(--surface);
  --bs-modal-bg: var(--surface);
  --bs-dropdown-bg: var(--surface);
  --bs-accordion-bg: var(--surface);
  --bs-toast-bg: var(--surface);
  --bs-popover-bg: var(--surface);
  --bs-offcanvas-bg: var(--surface);
  --bs-list-group-bg: var(--surface);
}

/* --- Aliases semânticos: claro é opt-in (toggle existente) -----------------
   Rampa inteira um degrau mais escura (era 50/100/200/300, virou
   100/200/300/400): com --bg quase colado no branco de --surface, painel e
   fundo da página ficavam indistinguíveis ("tudo muito contínuo") e a borda
   (neutral-200 sobre branco) quase não aparecia. Um degrau inteiro mantém o
   contraste JÁ testado entre passos adjacentes (ver cabeçalho do arquivo) —
   só desloca a régua, não inventa um tom novo. --surface continua branco
   fixo: é o degrau MAIS claro que dá o realce do painel sobre o fundo agora
   mais escuro. */
[data-bs-theme="light"] {
  --bg: var(--canaa-neutral-100);
  --surface: #ffffff;
  --surface-2: var(--canaa-neutral-200);
  --border: var(--canaa-neutral-300);
  --border-strong: var(--canaa-neutral-400);
  --text: var(--canaa-neutral-950);
  --text-muted: var(--canaa-neutral-600);

  /* Borda um pouco mais grossa só aqui: no escuro o contraste de cor já
     carrega a separação entre painel e fundo; no claro, com tons próximos, a
     borda de 1px "sumia" junto com a cor. --bs-border-width (Bootstrap,
     :root, 1px) é o que form-control/card/btn-outline/etc. leem — remapear
     uma vez cobre todos eles, sem regra componente a componente. */
  --bs-border-width: 1.5px;

  --primary: var(--canaa-primary-600);
  --primary-hover: var(--canaa-primary-500);
  --primary-active: var(--canaa-primary-700);
  --on-primary: var(--canaa-neutral-50);

  --shadow-card: 0 2px 10px rgba(16, 10, 6, 0.08);
  --shadow-panel: 0 8px 28px rgba(16, 10, 6, 0.14);
  /* Foco (UX-058): âmbar 600 sólido ≈ 4,7:1 sobre o fundo claro e 5,5:1 sobre o branco. */
  --focus-ring: var(--canaa-primary-600);
  --shadow-focus: 0 0 0 2px var(--focus-ring);

  --status-success-text: #004800;
  --status-success-bg: #cff8cf;
  --status-warning-text: #700500;
  --status-warning-bg: #ffdeb8;
  --status-danger-text: #7c0000;
  --status-danger-bg: #ffd4cd;
  --status-info-text: #003f61;
  --status-info-bg: #caf2ff;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-secondary-border-subtle: var(--border);
  --bs-link-color: var(--primary);
  /* Hover de link (UX-058): o 500 dava ~3,2:1 sobre o fundo claro; o 700 dá ~7:1. */
  --bs-link-hover-color: var(--canaa-primary-700);
  --bs-link-color-rgb: 144, 95, 0; /* --canaa-primary-600 */
  --bs-link-hover-color-rgb: 111, 67, 0; /* --canaa-primary-700 */
  --bs-body-bg-rgb: 241, 238, 235; /* --canaa-neutral-100 */
  --bs-body-color-rgb: 16, 10, 6; /* --canaa-neutral-950 */
  --bs-emphasis-color-rgb: 16, 10, 6;
  --bs-secondary-bg-rgb: 225, 221, 218; /* --canaa-neutral-200 */
  --bs-tertiary-bg-rgb: 225, 221, 218;

  --bs-card-bg: var(--surface);
  --bs-modal-bg: var(--surface);
  --bs-dropdown-bg: var(--surface);
  --bs-accordion-bg: var(--surface);
  --bs-toast-bg: var(--surface);
  --bs-popover-bg: var(--surface);
  --bs-offcanvas-bg: var(--surface);
  --bs-list-group-bg: var(--surface);
}