/* ============================================================
   TOKENS — Studio Torres Arquitetura
   Fonte única de cores, tipografia, espaço, forma e movimento.
   Espelha docs/02-design-system.md. Não declare valores soltos
   no restante do CSS: use estas variáveis.
============================================================ */
:root {
  /* Cores */
  --color-bg: #F6F3EE;          /* off-white quente (fundo geral) */
  --color-surface: #FFFFFF;
  --color-sand: #ECE6DC;        /* areia — painéis e seções alternadas */
  --color-stone: #D9D2C6;       /* linhas fortes, placeholders */
  --color-line: #E3DDD3;        /* divisórias */
  --color-ink: #1C1B19;         /* texto principal / botões escuros */
  --color-ink-2: #4E4A44;       /* texto secundário */
  --color-muted: #8B857C;       /* legendas */
  --color-dark: #1F1D1B;        /* seções e cards escuros */
  --color-on-dark: #F3EFE8;
  --color-on-dark-strong: #FFFFFF;             /* links ativos/hover da pílula (docs/20 D3) */
  --color-on-dark-muted: rgb(255 255 255 / .7); /* links inativos da pílula — 6,9:1 sobre a pílula (AA) */
  --color-accent: #6B4A33;      /* marrom Torres — uso pontual (destaques, hover, foco) */
  --color-accent-soft: #B8A089; /* madeira clara */
  --color-success: #3F6B4E;
  --color-error: #A2412F;
  /* Botões (docs/22 L2): o hover aprofunda a cor do próprio botão.
     Contraste do texto (AA): escuro 12,8:1 → 16,8:1; marrom 6,9:1 → 5,1:1; claro 15:1 → 12,4:1 */
  --btn-dark-bg: #2A2826;        /* preto um pouco mais claro (normal) */
  --btn-dark-bg-hover: #0F0E0D;  /* preto 100% (hover) */
  --btn-brown-bg: #B8A089;       /* = --color-accent-soft (marrom claro) */
  --btn-brown-bg-hover: #9E8771; /* ~13% mais escuro */
  --btn-light-bg: #F3EFE8;       /* = --color-on-dark (botão claro em fundo escuro/pílula) */
  --btn-light-bg-hover: #E2DACD; /* claro aprofundado */
  --color-wa: #1F8F5A;          /* só no ícone do WhatsApp flutuante */
  --color-dock: rgb(32 30 28 / .94); /* barra "Agenda aberta" (docs/25 M11), como a pílula */
  --color-live: #25D366;        /* bolinha "Agenda aberta" (docs/25 M11) */
  --shadow-dock: 0 10px 30px rgb(0 0 0 / .25);
  /* Fundos sólidos no lugar do backdrop-filter no celular (docs/25 M13) */
  --color-tag-solid: rgb(255 255 255 / .88);
  --color-view-solid: rgb(20 20 20 / .72);
  --color-pill-solid: rgb(31 29 27 / .96); /* --color-dark 96% */

  /* Tipografia */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-2xs: 0.75rem;                             /* 12px — mínimo legível (docs/19 M5) */
  --fs-eyebrow: 0.75rem;                         /* 12px */
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 0.9rem + 0.5vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 3.8vw, 5rem);
  --fs-giant: clamp(5rem, 2rem + 14vw, 16rem);   /* palavra gigante (manifesto) */
  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --tracking-eyebrow: 0.24em;
  --tracking-heading: -0.025em;

  /* Espaço (escala 4px) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-y: clamp(72px, 6vw + 40px, 144px);
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1280px;
  --container-wide: 90%;        /* hero + header no desktop (≥1024) */
  --header-h: 80px;             /* header no topo (docs/19 A0) */
  --header-h-scrolled: 64px;
  --tap-min: 44px;              /* área de toque mínima (docs/19 M4) */

  /* Forma */
  --radius-btn: 2px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-xl: 40px;            /* borda da seção que cobre a hero */

  /* Sombra (quase nula — minimalismo) */
  --shadow-1: 0 1px 2px rgb(28 27 25 / .06);
  --shadow-2: 0 12px 40px rgb(28 27 25 / .10);
  --shadow-btn: 0 8px 20px -6px rgb(28 27 25 / .28); /* hover dos botões (docs/21 P2) */

  /* Movimento */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* entradas longas (abertura, máscaras) */
  --ease-btn: cubic-bezier(.2, .7, .2, 1);    /* botões (docs/21 P2) */
  --ease-inout: cubic-bezier(.76, 0, .24, 1); /* cortina da abertura */
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms;
  --dur-color: 200ms; /* troca de cor dos links do menu (docs/20 D3) */
  --dur-btn: 250ms;   /* botões (docs/21 P2) */

  /* Camadas */
  --z-dock: 40; /* abaixo do header/menu e do modal (docs/25 M11) */
  --z-header: 50; --z-float: 60; --z-modal: 100; --z-intro: 200;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-color: 0ms; --dur-btn: 0ms; }
}