/* ==========================================================================
   O ORELHÃO VOLTOU · Design tokens
   Fonte única de verdade para cor, tipo, espaço, raio, sombra e movimento.
   Documentação visual: /design-system.html
   ========================================================================== */

:root {
  /* ---------- Cor · paleta da marca ---------- */
  --ink: #0B0B0C;          /* preto da logo / fundo das peças */
  --ink-2: #1B1B1E;
  --ink-3: #2A2A2E;
  --paper: #FFFFFF;        /* fundo principal do site */
  --fog: #F4F3EF;          /* off-white para blocos de apoio */
  --fog-2: #E8E6E0;
  --yellow: #FFCD00;       /* amarelo "VOLTOU" (amostrado da logo) */
  --yellow-2: #FFE15C;
  --red: #E3120B;          /* vermelho do orelhão (amostrado do render) */
  --red-deep: #9E0B06;
  --steel: #C9CDD2;        /* inox do painel / micro-ondas */
  --steel-2: #8E949B;

  /* ---------- Cor · semântica (troca por tema) ---------- */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--yellow);
  --muted: color-mix(in srgb, var(--fg) 60%, transparent);
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 85%, transparent);

  /* ---------- Tipografia ---------- */
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;
  --fw-black: 900;

  --fs-mega: clamp(3.4rem, 12vw, 13rem);
  --fs-display: clamp(2.5rem, 6.6vw, 7rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 4.5rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.08rem, 1.5vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;

  --lh-tight: 0.9;
  --lh-snug: 1.08;
  --lh-body: 1.6;
  --tr-tight: -0.04em;
  --tr-snug: -0.02em;
  --tr-wide: 0.14em;

  /* ---------- Espaço (escala 4/8) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(16px, 4vw, 56px);
  --section-y: clamp(5rem, 11vw, 10rem);
  --maxw: 1440px;

  /* ---------- Forma ---------- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 44px;
  --r-pill: 999px;
  --stroke: 2px;

  /* ---------- Elevação ---------- */
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px rgb(0 0 0 / .08);
  --shadow-lift: 0 18px 50px rgb(0 0 0 / .16), 0 4px 10px rgb(0 0 0 / .06);
  --pop: 5px 5px 0 var(--ink);           /* sombra "sticker", assinatura da marca */
  --pop-lg: 8px 8px 0 var(--ink);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: .18s;
  --d-base: .35s;
  --d-slow: .7s;
  --d-xslow: 1.1s;

  /* ---------- Camadas ---------- */
  --z-nav: 50;
  --z-cursor: 90;
  --z-loader: 100;
}

/* Temas de seção: o body assume o tema da seção visível */
[data-theme="ink"] {
  --bg: var(--ink);
  --fg: var(--paper);
  --accent: var(--yellow);
  --pop: 5px 5px 0 var(--yellow);
  --pop-lg: 8px 8px 0 var(--yellow);
}

[data-theme="yellow"] {
  --bg: var(--yellow);
  --fg: var(--ink);
  --accent: var(--ink);
}

[data-theme="fog"] {
  --bg: var(--fog);
  --fg: var(--ink);
}