/* =====================================================================
   DELUI — DESIGN TOKENS (fonte única de verdade visual)
   Etapa 1 · Fase 1. Identidade do brandbook 2026.
   ===================================================================== */
:root {
  /* ---------- Cores ---------- */
  --delui-navy: #0B1E48;        /* base / fundos escuros */
  --delui-navy-deep: #04122E;   /* navy mais profundo */
  --delui-navy-90: #1C2F5C;     /* hover de fundos escuros */
  --delui-navy-2: #14203B;
  --delui-navy-soft: #24345C;
  --delui-navy-10: #E8EBF2;     /* fundo claro derivado / skeleton */

  --delui-gold: #C9A24D;        /* CTAs, detalhes, hover (parcimônia) */
  --delui-gold-hover: #D9B665;
  --delui-gold-light: #E0C27E;
  --delui-gold-text: #7D6124;   /* dourado escuro p/ TEXTO pequeno sobre claro/creme (AA) */

  --delui-off-white: #FAF8F4;   /* fundo claro premium */
  --delui-img-bg: #FFFFFF;      /* fundo dos containers de imagem de produto (== branco gerado pelo normalizador) */
  --delui-cream: #F4F1E9;
  --delui-cream-2: #EDE6D6;

  --delui-text: #1A1A2E;        /* texto principal */
  --delui-graphite: #2B2B2B;
  --delui-text-muted: #5A607A;  /* texto secundário */
  --delui-muted: #9DAAC6;       /* texto sobre navy */

  --delui-error: #B3423F;
  --delui-success: #2E6B4F;

  /* ---------- Tipografia ---------- */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --delui-serif: var(--font-display);   /* compat. legado */
  --delui-sans: var(--font-body);

  /* Escala tipográfica fluida (mobile → desktop) */
  --fs-xs:   clamp(0.72rem, 0.69rem + 0.15vw, 0.80rem);
  --fs-sm:   clamp(0.82rem, 0.78rem + 0.20vw, 0.90rem);
  --fs-base: clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
  --fs-lg:   clamp(1.10rem, 1.00rem + 0.50vw, 1.30rem);
  --fs-xl:   clamp(1.40rem, 1.20rem + 1.00vw, 1.90rem);
  --fs-2xl:  clamp(1.90rem, 1.50rem + 2.00vw, 2.80rem);
  --fs-hero: clamp(2.20rem, 1.60rem + 3.20vw, 3.80rem);

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

  /* ---------- Raios ---------- */
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 14px; --r-full: 999px;

  /* ---------- Sombras suaves ---------- */
  --sh-sm: 0 2px 8px rgba(11, 30, 72, 0.08);
  --sh-md: 0 10px 26px rgba(11, 30, 72, 0.12);
  --sh-lg: 0 20px 44px rgba(4, 18, 46, 0.20);
  --sh-gold: 0 6px 20px rgba(201, 162, 77, 0.35);

  /* ---------- Transições ---------- */
  --t-fast: 150ms ease-out;
  --t-base: 200ms ease-out;
  --t-slow: 250ms ease-out;

  /* ---------- Layout ---------- */
  --wrap: 1240px;
  --touch: 44px;               /* alvo mínimo de toque */
}

/* Foco acessível dourado (global) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--delui-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}