/* =========================================================================
   tokens.css — sistema de design da Umamão
   Paleta extraída do logo (assets/logo/mark.png) e do arquivo de variações
   de cor da marca. Tudo que for cor, tipo, espaço, raio ou curva de
   animação mora aqui — nenhum valor bruto nos outros arquivos.
   ========================================================================= */

:root {
  /* ---------- Marca ---------- */
  --orange-100: #ffe1a6;
  --orange-200: #ffc76d;
  --orange-300: #ffb128;
  --orange-400: #ff9e3d;
  --orange-500: #ff8c00; /* cor núcleo do símbolo */
  --orange-600: #f06a00;
  --orange-700: #e85700;
  --orange-800: #c94800;

  --grad-brand: linear-gradient(135deg, #ffa724 0%, #ff6a00 100%);
  --grad-brand-soft: linear-gradient(135deg, #ffd48a 0%, #ff9820 100%);

  /* ---------- Neutros quentes ---------- */
  --cream: #f8f4ef;
  --cream-2: #f3f0eb;
  --sand: #e7dfd5;
  --ink: #161616;
  --ink-2: #1c1917;
  --ink-3: #262620;
  --muted: #7d766d;
  --muted-2: #605a53;
  --white: #fff;

  /* ---------- Papéis semânticos ---------- */
  --bg: var(--cream-2);
  --fg: var(--ink);
  --fg-muted: var(--muted-2);
  --surface: var(--white);
  --hairline: rgba(22, 22, 22, 0.12);
  --hairline-on-dark: rgba(255, 255, 255, 0.14);

  /* ---------- Tipografia ---------- */
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Contraponto serifado do hero. Única peça fora do sistema geométrico
     da marca — trocar só aqui caso queira unificar tudo em sans. */
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;

  --fs-hero: clamp(2.75rem, 12vw, 6rem);
  --fs-h2: clamp(2rem, 7.5vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 5vw, 2rem);
  --fs-lead: clamp(1.0625rem, 4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ---------- Espaçamento e layout ---------- */
  --page-x: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1280px;
  --section-y: clamp(4.5rem, 12vw, 9rem);

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-card: 0 1px 2px rgba(22, 22, 22, 0.04), 0 8px 24px rgba(22, 22, 22, 0.06);
  --shadow-lift: 0 2px 6px rgba(22, 22, 22, 0.06), 0 18px 40px rgba(22, 22, 22, 0.14);

  /* ---------- Movimento ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-mid: 400ms;
  --dur-slow: 700ms;

  /* ---------- Camadas ---------- */
  --z-header: 60;
  --z-menu: 70;
}