/* Fundação do sistema visual — único :root do projeto.
   Carrega antes de todos os outros CSS.

   A escala é contínua: cada tamanho interpola linearmente entre 320px e 1440px
   de viewport e trava nos dois extremos. Fórmula de cada clamp:
     B = (max − min) / 1120        →  o coeficiente em vw
     A = min − B × 320             →  o deslocamento em rem
   Assim nenhum tamanho fica congelado numa faixa de largura, que era o defeito
   do sistema anterior (texto idêntico de 320px a 700px, salto em 900px). */

:root {
  /* ---------------------------------------------------------------- cores */
  --ink: #0a0a0a;
  --ink-deep: #0a0a0a;
  --paper: #f6f6f1;
  --white: #ffffff;
  --muted: #667085;
  --pale: #dedfe1;
  --accent: #ff5701;
  --accent-deep: #c94100;

  /* superfícies escuras derivadas do --ink, sem hex novo */
  --surf-deep: color-mix(in oklab, var(--ink), #0a0a0a 100%);
  --surf-section: color-mix(in oklab, var(--ink), #ffffff 2%);
  --surf-card: color-mix(in oklab, var(--ink), #ffffff 5%);
  --surf-card-hover: color-mix(in oklab, var(--ink), #ffffff 9%);

  --line: rgba(222, 223, 225, 0.2);
  --line-strong: rgba(222, 223, 225, 0.38);
  --line-dark: rgba(17, 24, 39, 0.16);
  --edge: rgba(255, 255, 255, 0.07);
  --edge-card: rgba(255, 255, 255, 0.1);
  --edge-strong: rgba(255, 255, 255, 0.16);
  --accent-subtle: rgba(255, 87, 1, 0.12);
  --accent-line: rgba(255, 87, 1, 0.45);

  --shadow: 0 24px 90px rgba(17, 24, 39, 0.22);
  --shadow-soft: 0 16px 34px rgba(17, 24, 39, 0.32);

  /* ------------------------------------------------------------ tipografia */
  --display: "Aloevera Display", sans-serif;
  --body: "Aloevera Display", sans-serif;

  /* Pesos — quatro papéis, sem exceção. Antes o site usava 300, 400, 500, 600,
     700 e 800 sem critério: o mesmo h2 aparecia em 500 numa página e em 700 na
     outra, e o título do hero vinha em 300 com um <b> 600 dentro. */
  --w-corpo: 400;   /* texto corrido */
  --w-ui: 500;      /* rótulos, navegação, tags, legendas, caixa alta */
  --w-titulo: 600;  /* todos os títulos e botões */
  --w-forte: 700;   /* números de destaque e ênfase dentro de título */

  --t-hero: clamp(2rem, 1.607rem + 1.964vw, 3.375rem);  /* 32 → 54 */
  --t-1: clamp(1.875rem, 1.482rem + 1.964vw, 3.25rem);  /* 30 → 52 */
  --t-2: clamp(1.75rem, 1.429rem + 1.607vw, 2.875rem);  /* 28 → 46 */
  --t-3: clamp(1.5rem, 1.321rem + 0.893vw, 2.125rem);  /* 24 → 34 */
  --t-35: clamp(1.375rem, 1.268rem + 0.536vw, 1.75rem);  /* 22 → 28 */
  --t-4: clamp(1.1875rem, 1.134rem + 0.268vw, 1.375rem);  /* 19 → 22 */
  --t-5: clamp(1.0625rem, 1.045rem + 0.089vw, 1.125rem);  /* 17 → 18 */
  --t-body: 1rem;  /* 16 → 16 */
  --t-sm: 0.875rem;  /* 14 → 14 */
  --t-xs: 0.8125rem;                                       /* 13, piso de legibilidade */

  --lh-display: 1.02;  /* títulos grandes */
  --lh-titulo: 1.12;   /* títulos médios */
  --lh-lead: 1.4;      /* parágrafo de abertura */
  --lh-corpo: 1.55;    /* texto corrido */

  /* Entrelinha e tracking também eram um zoológico: dez valores de
     letter-spacing para três situações. */
  --ls-display: -0.04em;  /* títulos grandes */
  --ls-titulo: -0.03em;   /* títulos médios */
  --ls-label: 0.14em;     /* caixa alta */
  --ls-ui: 0.02em;        /* botões e rótulos em caixa mista */

  /* ----------------------------------------------------------- espaçamento */
  --s-1: 0.25rem;                                          /* 4 */
  --s-2: 0.5rem;                                           /* 8 */
  --s-3: 0.75rem;  /* 12 → 12 */
  --s-4: clamp(1rem, 0.982rem + 0.089vw, 1.0625rem);  /* 16 → 17 */
  --s-5: clamp(1.25rem, 1.232rem + 0.089vw, 1.3125rem);  /* 20 → 21 */
  --s-6: clamp(1.5rem, 1.411rem + 0.446vw, 1.8125rem);  /* 24 → 29 */
  --s-7: clamp(1.875rem, 1.643rem + 1.161vw, 2.6875rem);  /* 30 → 43 */
  --s-8: clamp(2.25rem, 1.857rem + 1.964vw, 3.625rem);  /* 36 → 58 */
  --s-9: clamp(3rem, 2.5rem + 2.5vw, 4.75rem);  /* 48 → 76 */
  --s-10: clamp(5rem, 4.286rem + 3.571vw, 7.5rem);  /* 80 → 120 */

  /* ---------------------------------------------------------------- layout */
  --shell-max: 1000px;
  --shell-narrow: 880px;
  --shell-pad: clamp(1rem, 0.829rem + 0.857vw, 1.75rem);  /* 16 → 28 */
  --prose-max: 68ch;
  --tap: 44px;                                             /* alvo mínimo de toque */
  --r: 8px;
  --r-card: 14px;
  --r-lg: 18px;

  /* ---------------------------------------------------------------- motion */
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-time: 800ms;
  --spring-pop: cubic-bezier(0.2, 1.08, 0.3, 1);
  --spring-pop-time: 950ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rv-time: 620ms;
  --hover-time: 220ms;
  --mo-ease: var(--ease);
  --mo-time: 620ms;
  --mo-hover: 220ms;

  /* Nomes antigos do brand.css. Ficam como alias para os ~50 usos existentes
     continuarem valendo sem renomeação em massa. */
  --orange: var(--accent);
  --orange-deep: var(--accent-deep);
  --orange-subtle: var(--accent-subtle);
  --orange-line: var(--accent-line);
  --slate: var(--muted);
}