/* ============================================================
   tokens.css · Caroline Barbosa Psi
   Design tokens · COMPONENT-MAP §1.2 / §1.3 / §1.11 / §1.12
   Paleta: Caroline × Museum (caramelo)
   Order de carga: 2º (depois reset).
   ============================================================ */

:root {
  /* --- Paleta brand ------------------------------------- */
  --color-cream: #FFF9F3;
  --color-cool-neutral: #F8F8F8;
  --color-footer: #F8F2EB;
  --color-caramel: #976243;
  /* Escurecido de #AB6E29 para #966124 em 07/08: o valor antigo não alcançava
     4,5:1 contra NENHUMA superfície da paleta (pior caso 3,70 sobre o gradiente
     quente, 4,02 sobre cream) e o token é cor de texto em 24 regras, incluindo o
     rodapé fixo das LPs a 14px. O novo mede 4,58 no pior caso e 4,98 sobre cream.
     Segue distinto do caramel: matiz 32 contra 22 graus, saturação 61 contra 38%. */
  --color-amber-deep: #966124;
  --color-espresso: #512A01;
  --color-espresso-78: rgba(81, 42, 1, 0.78);
  --color-stone-900: #1c1917;
  --color-hairline: rgba(81, 42, 1, 0.13);
  --color-stone-20: rgba(28, 25, 23, 0.18);
  --color-photo-overlay: rgba(250, 245, 239, 0.5);
  --color-sage: #9EA08F;
  --color-lime: #D4F268;
  --color-lime-hover: #C3E354;
  --color-pale-yellow: #FBFCD4;
  --color-live: #16a34a;
  --color-paper: #FAF7F4;

  /* --- Gradients ---------------------------------------- */
  --gradient-soft-cream: linear-gradient(120deg, #F9F3ED, #FAF7F4);
  --gradient-warm-cream: linear-gradient(120deg, #F8EFE5, #FAF7F4);
  --gradient-brand-mark: linear-gradient(135deg, #9EA08F, #976243, #D4F268);

  /* --- Tipografia (famílias) ---------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Cabin', system-ui, -apple-system, sans-serif;
  --font-eyebrow: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale --------------------------------------- */
  /* Piso 36px (não 44): abaixo de ~643px o termo fluido fica travado no piso e o
     h1 do hero renderizava 6 linhas em 390px, empurrando o CTA para fora da 1ª
     dobra. 36px recupera ~2 linhas no mobile; acima de 643px 5.6vw domina e o
     desktop fica intacto. */
  --fs-display-hero: clamp(36px, 5.6vw, 76px);
  /* h1 das LPs referencia var(--fs-display-h1) com fallback 56px; sem este token o h1
     ficava 56px fixo no mobile e estourava scroll lateral com palavras longas. Teto 56px
     preserva o desktop atual; coeficiente 5.6vw espelha o hero; piso 36px cabe em 320px. */
  --fs-display-h1: clamp(36px, 5.6vw, 56px);
  --fs-display-h2: clamp(34px, 4.2vw, 52px);
  --fs-display-h3: 36px;
  --fs-display-stat: 64px;
  --fs-card-h4: 23px;
  --fs-toggle-h5: 19px;
  --fs-italic-accent: 32px;
  --fs-body-l: 18px;
  --fs-body-m: 16px;
  --fs-body-s: 14px;
  --fs-eyebrow: 12px;
  --fs-body-mono: 11px;

  --lh-display-hero: 0.96;
  --lh-display-h2: 1.05;
  --lh-display-h3: 1.2;
  --lh-card-h4: 1.3;
  --lh-toggle-h5: 1.5;
  --lh-body: 1.55;

  --tracking-tight: -0.02em;
  --tracking-h2: -0.015em;
  --tracking-h3: -0.005em;
  --tracking-eyebrow: 0.18em;

  /* --- Spacing & layout --------------------------------- */
  --gap-min: 14px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --card-padding: 30px;
  --section-y: 8vw;
  --section-x: 5vw;
  --container-max: 1200px;
  --nav-height: 80px;

  /* --- Radii -------------------------------------------- */
  --radius-card: 14px;
  --radius-portrait: 22px;
  --radius-pill: 9999px;
  --radius-arched-tl: 230px;
  --radius-arched-tr: 230px;
  --radius-arched-br: 28px;
  --radius-arched-bl: 28px;

  /* --- Shadows (museum-style soft) ---------------------- */
  --shadow-soft: 0 1px 2px rgba(81, 42, 1, 0.04), 0 8px 24px rgba(81, 42, 1, 0.08);
  --shadow-card: 0 2px 6px rgba(81, 42, 1, 0.06), 0 12px 32px rgba(81, 42, 1, 0.10);
  --shadow-pill-primary: 0 18px 40px -18px rgba(28, 25, 23, 0.55);
  --shadow-pill-primary-hover: 0 22px 50px -20px rgba(28, 25, 23, 0.70);
  --shadow-pill-accent: 0 14px 28px -10px rgba(212, 242, 104, 0.55);
  --shadow-pill-accent-hover: 0 18px 36px -10px rgba(212, 242, 104, 0.75);
  --shadow-lift-1: 0 2px 8px rgba(81, 42, 1, 0.10);
  --shadow-lift-2: 0 6px 16px rgba(81, 42, 1, 0.14);
  --shadow-demo-lift: 0 24px 50px -25px rgba(81, 42, 1, 0.35);
  --shadow-contact-row: 0 18px 40px -22px rgba(81, 42, 1, 0.32);
  --shadow-hero-arched: 0 60px 120px -50px rgba(81, 42, 1, 0.45);
  --shadow-portrait: 0 30px 60px -20px rgba(0, 0, 0, 0.45);

  /* --- Motion ------------------------------------------- */
  --t-fast: 200ms;
  --t-base: 300ms;
  --t-slow: 500ms;
  --t-reveal: 800ms;
  --t-grayscale: 700ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /* --- Z-index ------------------------------------------ */
  --z-cookie: 9000;
  --z-wa-float: 8000;
  --z-nav: 7000;
  --z-modal: 9500;
}