/* ══════════════════════════════════════════════
   TOKENS.CSS — Compra Turbo
   Design tokens centralizados (fonte de verdade)
   Fonte: skill compra-turbo-brand/design-tokens.md
   Dependencias: nenhuma
   ══════════════════════════════════════════════ */

:root {

  /* ── FONTES ──────────────────────────────── */
  --ff-heading: 'Satoshi', sans-serif;
  --ff-body: 'Inter', sans-serif;

  /* ── CORES PRIMARIAS ─────────────────────── */
  --brand-orange: #D4500A;
  --brand-orange-hover: #E85A12;
  --bg-primary: #0F0D0B;
  --text-white: #FFFFFF;

  /* ── FUNDOS ──────────────────────────────── */
  --bg-alt: #121010;
  --bg-card: #13110F;
  --bg-card-alt: #161412;
  --bg-cta: #D4500A;

  /* ── FUNDOS CLAROS (secoes light) ────────── */
  --bg-light: #F0EDE6;
  --bg-light-alt: #E6E2DA;
  --bg-light-card: #FFFFFF;
  --text-dark: #0F0D0B;
  --text-dark-muted: #4A4640;
  --text-dark-soft: #6A6460;

  /* ── CINZAS QUENTES (textos secundarios) ── */
  --text-muted-1: #C8C4C0;
  --text-muted-2: #A39E99;
  --text-muted-3: #7A7672;
  --text-muted-4: #5C5956;
  --text-disabled: #3A3836;

  /* ── BORDERS ─────────────────────────────── */
  --border-subtle: #1A1816;
  --border-card: #221F1D;
  --border-section: #1C1A18;
  --border-light: #E6E2DA;
  --border-light-card: #E6E2DA;

  /* ── TRANSPARENCIAS DO LARANJA ───────────── */
  --highlight-bg: rgba(212, 80, 10, 0.04);
  --highlight-border: rgba(212, 80, 10, 0.30);
  --highlight-shadow: rgba(212, 80, 10, 0.12);
  --brand-orange-08: rgba(212, 80, 10, 0.08);
  --brand-orange-20: rgba(212, 80, 10, 0.2);
  --brand-orange-25: rgba(212, 80, 10, 0.25);
  --brand-orange-40: rgba(212, 80, 10, 0.4);

  /* ── CORES DE STATUS ─────────────────────── */
  --color-success: #2ECC71;
  --color-warning: #F39C12;
  --color-error: #E74C3C;

  /* ── CORES DE TERCEIROS ────────────────────── */
  --color-whatsapp: #25D366;
  --color-black: #000000;

  /* ── TIPOGRAFIA — TAMANHOS ───────────────── */
  /* Titulos responsivos */
  --fs-hero: clamp(42px, 7vw, 96px);
  --fs-h1: clamp(36px, 5.5vw, 80px);
  --fs-h2: clamp(32px, 4.5vw, 64px);
  --fs-h3: clamp(24px, 3vw, 42px);
  --fs-h4: clamp(18px, 2vw, 24px);

  /* Corpo */
  --fs-subtitle: clamp(18px, 1.8vw, 22px);
  --fs-body: clamp(14px, 1.2vw, 16px);
  --fs-body-lg: clamp(15px, 1.4vw, 18px);
  --fs-small: clamp(12px, 1vw, 14px);
  --fs-xs: clamp(10px, 0.8vw, 12px);

  /* Componentes */
  --fs-eyebrow: clamp(11px, 1.1vw, 14px);
  --fs-card-title: clamp(18px, 1.5vw, 20px);
  --fs-anchor: 18px;
  --fs-metric: clamp(48px, 6vw, 72px);

  /* ── ESPACAMENTOS ────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ── LAYOUT ──────────────────────────────── */
  --max-width: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-padding: clamp(72px, 10vw, 140px);
  /* Altura do header fixo — referencia para padding-top de heros/paginas */
  --header-height: 72px;
  /* Gap padrao do nav desktop */
  --nav-gap: 36px;

  /* ── CORES AUXILIARES ────────────────────── */
  /* Amarelo Mercado Livre (partículas em #canais) */
  --color-particle-yellow: #FFD700;

  /* ── BORDER RADIUS ───────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 100px;

  /* ── OVERLAYS ─────────────────────────────── */
  --overlay-dark: rgba(15, 13, 11, 0.92);
  --overlay-heavy: rgba(15, 13, 11, 0.95);
  --overlay-medium: rgba(15, 13, 11, 0.75);
  --overlay-light: rgba(15, 13, 11, 0.4);

  /* ── TRANSPARENCIAS DO PRETO ─────────────── */
  --black-alpha-80: rgba(0, 0, 0, 0.8);

  /* ── DECORATIVOS ─────────────────────────── */
  --watermark-alpha: rgba(255, 255, 255, 0.02);

  /* ── SHADOWS ─────────────────────────────── */
  --shadow-card: 0 0 40px rgba(212, 80, 10, 0.06);
  --shadow-card-highlight: 0 4px 60px rgba(212, 80, 10, 0.12), 0 0 0 1px rgba(212, 80, 10, 0.15);
  --shadow-cta: 0 4px 24px rgba(212, 80, 10, 0.30);
  --shadow-cta-hover: 0 8px 40px rgba(212, 80, 10, 0.48);
  --shadow-timeline-active: 0 0 24px rgba(212, 80, 10, 0.25);
  --shadow-whatsapp: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-whatsapp-hover: 0 6px 20px rgba(0, 0, 0, 0.35);

  /* Sistema de elevacao multi-layer.
     Cada nivel combina close (near) + far + glow subtil,
     simulando luz ambiente + fonte direcional. */
  --elev-1:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.12);
  --elev-2:
    0 2px 4px rgba(0, 0, 0, 0.20),
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 0 32px rgba(212, 80, 10, 0.04);
  --elev-3:
    0 4px 8px rgba(0, 0, 0, 0.24),
    0 16px 48px rgba(0, 0, 0, 0.24),
    0 0 48px rgba(212, 80, 10, 0.08);
  --elev-hover:
    0 6px 12px rgba(0, 0, 0, 0.24),
    0 20px 60px rgba(0, 0, 0, 0.28),
    0 0 56px rgba(212, 80, 10, 0.12);

  /* ── GRADIENTES ──────────────────────────── */
  --gradient-glow: radial-gradient(circle, rgba(212, 80, 10, 0.07) 0%, transparent 65%);
  --gradient-edge-line: linear-gradient(to bottom, transparent 0%, rgba(212, 80, 10, 0.25) 35%, rgba(212, 80, 10, 0.25) 65%, transparent 100%);
  --gradient-topbar: linear-gradient(to right, rgba(212, 80, 10, 0.12), transparent);
  --gradient-topbar-highlight: linear-gradient(to right, #D4500A 70%, transparent);
  --gradient-column-sep: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 75%, transparent);

  /* ── TRANSICOES ──────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
  --duration-reveal: 0.75s;

  /* ── Z-INDEX SCALE ───────────────────────── */
  --z-base: 1;
  --z-content: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-nav: 500;
  --z-loading: 900;
  --z-cursor: 9999;
}

/* ── ULTRAWIDE ─────────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --max-width: 1400px;
  }
}

/* Desktop grande (iMac padrao): aumenta max-width para 1520px */
@media (min-width: 1920px) {
  :root {
    --max-width: 1520px;
    --gutter: clamp(32px, 4vw, 64px);
  }
}

/* True ultra-wide (iMac 27 e monitores 4K): deixa conteudo
   respirar mas nao ultrapassa limite de leitura confortavel */
@media (min-width: 2400px) {
  :root {
    --max-width: 1680px;
  }
}