/* =========================================================================
   DESIGN TOKENS — Plataforma de Leilões TRIACCA
   Variáveis centrais. Mude aqui = muda em toda a página.
   ========================================================================= */
:root {
  /* ---- Cores ---- */
  --color-bg:            #141414;   /* fundo principal */
  --color-surface:       #1b1b1b;   /* cards, painéis */
  --color-surface-2:     #0d0d0d;   /* footer, contrastes */
  --color-border:        rgba(255,255,255,0.05);
  --color-border-strong: rgba(255,255,255,0.07);

  --color-text:          #ffffff;
  --color-text-muted:    #cccccc;
  --color-text-dim:      #aaaaaa;
  --color-text-dimmer:   #767676;
  --color-text-faint:    #555555;
  --color-text-faintest: #333333;

  --color-accent:        #fc8000;   /* laranja TRIACCA — único brand color */
  --color-accent-soft:   rgba(252,128,0,0.08);
  --color-accent-line:   rgba(252,128,0,0.25);

  --color-whatsapp:      #25D366;

  /* ---- Tipografia ---- */
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Escala tipográfica responsiva (clamp para grandes; fixa para corpo) */
  --fs-display: clamp(30px, 4.1vw, 80px);   /* hero h1 */
  --fs-h2:      clamp(24px, 3.1vw, 62px);   /* títulos de seção */
  --fs-h2-cta:  clamp(28px, 3.9vw, 76px);   /* CTA final */
  --fs-h3:      clamp(17px, 1.45vw, 28px);  /* cards */
  --fs-lead:    clamp(15px, 1.3vw, 25px);   /* subtítulo hero/CTA */
  --fs-body:    clamp(14px, 1.05vw, 20px);
  --fs-body-sm: clamp(13px, 0.9vw, 17px);
  --fs-meta:    clamp(12px, 0.85vw, 16px);
  --fs-caption: clamp(11px, 0.75vw, 14px);
  --fs-micro:   clamp(10px, 0.7vw,  13px);
  --fs-eyebrow: clamp(9px,  0.65vw, 12px);  /* labels uppercase */
  --fs-nano:    clamp(8px,  0.55vw, 10px);

  /* ---- Espaçamento ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-10: 52px;
  --space-12: 64px;
  --space-16: 80px;
  --space-20: 104px;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --container-pad: clamp(24px, 2.5vw, 56px);
  --nav-height:    clamp(64px, 4.6vw, 88px);

  /* ---- Bordas / Radius ---- */
  --radius-sharp: 1px;       /* default — visual quase-quadrado */
  --radius-md:    10px;
  --radius-lg:    20px;
  --radius-pill:  100px;
  --radius-full:  50%;

  /* ---- Sombras ---- */
  --shadow-mockup: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-badge:  0 8px 28px rgba(252,128,0,0.35);
  --shadow-fab:    0 4px 24px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.25);

  /* ---- Transições ---- */
  --t-fast:   0.2s;
  --t-base:   0.3s;
  --t-slow:   0.6s;

  /* ---- Tracking (letter-spacing) padronizado para eyebrows ---- */
  --tracking-eyebrow: 3.5px;
  --tracking-label:   2.5px;
  --tracking-button:  1.8px;
}