/* ============================================================
   tokens.css — Luiza Ribeiro (Style Guide v1.2)
   Fonte da verdade: design-system-luiza.md + variáveis do Figma.
   NUNCA hardcode cor/spacing no lp.css — sempre var(--token).
   ============================================================ */
:root{
  /* ---- navy ---- */
  --navy-50:#E8EDF5; --navy-100:#C9D4E6; --navy-200:#9FB2D1; --navy-300:#7590BC;
  --navy-400:#4C6EA7; --navy-500:#2B5192; --navy-600:#1A3D77; --navy-700:#0E2C5F;
  --navy-800:#071F50; --navy-900:#021A48; --navy-950:#010F2E;

  /* ---- dourado premium (ramp champagne — NUNCA chapado em área grande) ---- */
  --gold-highlight:#F7ECC4; --gold-light:#EBD88C; --gold-core:#D4B95A;
  --gold-deep:#B3933B; --gold-shadow:#8A6E24; --gold-brand-idv:#CFB338;
  --grad-gold:linear-gradient(135deg,var(--gold-light) 0%,var(--gold-core) 45%,var(--gold-deep) 100%);
  --grad-gold-text:linear-gradient(120deg,var(--gold-highlight),var(--gold-core) 60%,var(--gold-deep));

  /* ---- neutros quentes ---- */
  --cream-25:#FCFBF7; --cream-50:#FAF7EF; --cream-100:#F4EFE2; --cream-200:#EDE6D3;
  --cream-300:#DFD5BC; --cream-400:#C9BCA0; --cream-500:#AC9E82; --cream-600:#8A7D64;
  --cream-700:#685E4B; --cream-800:#474033; --cream-900:#26221B;

  /* ---- feedback ---- */
  --success:#2F8A4C; --success-subtle:#E3F2E8; --success-fg:#1E5931;
  --warning:#B45309; --warning-subtle:#FBEED9; --warning-fg:#7A3807;
  --error:#C4442C;   --error-subtle:#F9E4DF;   --error-fg:#8A2E1D;
  --info:#2E7E8F;    --info-subtle:#E1F0F3;    --info-fg:#1D5462;

  /* ---- semânticos ---- */
  --bg-canvas:var(--cream-25);
  --bg-surface:#FFFFFF;
  --bg-section-alt:var(--cream-50);
  --bg-dark:var(--navy-900);
  --bg-dark-deep:var(--navy-950);
  --bg-dark-elevated:var(--navy-800);
  --fg-default:var(--navy-900);
  --fg-muted:var(--cream-600);
  --fg-on-dark:#F4EFE2;
  --fg-on-dark-muted:#B8C0D4;
  --fg-on-gold:var(--navy-900);
  --fg-gold-on-light:var(--gold-deep);
  --fg-gold-on-dark:var(--gold-light);
  --border-default:var(--cream-300);
  --border-strong:var(--cream-400);
  --border-focus:var(--gold-core);
  --border-on-dark-gold:rgba(212,185,90,.35);

  /* ---- tipografia ---- */
  --font-serif:'Playfair Display',Georgia,serif;
  --font-sans:'Montserrat',system-ui,sans-serif;
  --text-display:clamp(2.5rem,4.6vw,3.75rem);
  --text-h1:clamp(2rem,3.4vw,2.5rem);
  --text-h2:clamp(1.75rem,2.6vw,2rem);
  --text-h3:1.5rem; --text-h4:1.25rem;
  --text-body-lg:1.125rem; --text-body-md:1rem; --text-body-sm:.875rem;
  --text-caption:.75rem;
  --text-hero:clamp(2.3rem,3.85vw,4.2rem);    /* headline do hero — cabe "Você está vivendo" em 1 linha na coluna ~672px */
  --lh-tight:1.12; --lh-heading:1.25; --lh-body:1.6;
  --ls-overline:.24em; --ls-button:.01em;

  /* ---- spacing (base 8) ---- */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px;
  --sp-48:48px; --sp-64:64px; --sp-80:80px; --sp-100:100px; --sp-120:120px;
  --section-pad:clamp(72px,8vw,120px);

  /* ---- radius ---- */
  --radius-input:12px; --radius-card:16px; --radius-orn:22px 22px 22px 6px;
  --radius-orn-lg:32px 32px 32px 10px; --radius-button:999px; --radius-layer:48px;

  /* ---- sombras / glows ---- */
  --shadow-card:0 2px 8px rgba(2,26,72,.06);
  --shadow-card-hover:0 14px 34px rgba(2,26,72,.12);
  --shadow-modal:0 16px 48px rgba(2,26,72,.18);
  --shadow-layer-rise:0 -34px 70px rgba(1,10,30,.22);
  --glow-cta:0 8px 24px rgba(179,147,59,.35);
  --glow-cta-hover:0 10px 28px rgba(179,147,59,.42);
  --glow-media:0 0 48px 8px rgba(212,185,90,.45);
  --btn-inner-highlight:inset 0 1px 0 rgba(255,255,255,.45);

  /* ---- stroke / focus ---- */
  --stroke-default:1px; --stroke-focus:2px;

  /* ---- motion ---- */
  --dur-fast:.15s; --dur-default:.25s; --dur-slow:.4s; --dur-reveal:.6s;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);

  /* ---- z-index ---- */
  --z-bg:0; --z-deco:1; --z-content:2; --z-notch:3; --z-layer:5; --z-ribbons:8;
  --z-dim:9; --z-nav:50; --z-whatsapp:55; --z-modal:70;

  /* ============================================================
     PONTE — base.css (universal) → tokens Luiza
     base.css consome nomes semânticos genéricos (compartilhados
     entre clientes). Aqui mapeamos cada um pros valores do Style
     Guide da Luiza, então base.css fica INTOCADO e universal.
     ============================================================ */
  /* fontes / pesos */
  --font-display:var(--font-serif);          /* Playfair Display (títulos) */
  --font-script:'Photograph Signature','Great Vibes',cursive;  /* watermarks da bio (assinatura) */
  --fw-medium:500; --fw-semibold:600;
  /* tracking / label (overline) */
  --ls-display:-0.01em;                       /* display -1% (DS §4) */
  --ls-label:var(--ls-overline);              /* overline caps */
  --text-label:var(--text-caption);           /* overline 12px */
  /* easing alias */
  --ease-ease-out:var(--ease-out);
  /* accent semântico — padrão = sobre CLARO (bio/cards/produtos/faq) */
  --brand-active:var(--gold-deep);            /* eyebrow/accent sobre creme */
  --brand-hover:var(--gold-core);
  --brand-subtle:var(--fg-on-gold);           /* texto do CTA primário (navy sobre dourado) */
  --brand-fg:var(--navy-900);                 /* hover do ghost */
  /* gradientes de botão */
  --gradient-btn-primary:var(--grad-gold);
  --gradient-btn-secondary-border:var(--grad-gold);
  --gradient-btn-whatsapp:linear-gradient(90deg,#25D366 0%,#1EBE5A 100%); /* verde oficial WhatsApp */
  /* glow do CTA */
  --shadow-glow-gold:var(--glow-cta-hover);
}

/* Seções ESCURAS (hero/vsl/depoimentos): accent/eyebrow claros p/ contraste sobre navy.
   Aplicar .lp-dark na section navy. */
.lp-dark{
  --brand-active:var(--gold-light);
  --brand-hover:var(--gold-highlight);
  --fg-default:var(--fg-on-dark);
  --fg-muted:var(--fg-on-dark-muted);
}