/* =============================================================
   Static Sites DS — tokens
   Fonte única de verdade para cores, tipografia, espaçamento,
   raios, sombra e grid. Nenhum valor visual deve nascer fora
   daqui: se não está como token, não se usa.

   Dois itens variam por PROJETO (e só esses dois):
     1. A matiz principal (--hue / --sat abaixo).
     2. A família tipográfica (--ff abaixo).
   Todo o resto é fixo no sistema.
   ============================================================= */

:root {
  /* ----------------------------------------------------------
     COR — paleta de espectro único
     A paleta nasce de UMA matiz principal em HSL. Todos os tons
     (claros, escuros, neutros) mantêm a mesma matiz, variando
     só luminosidade e saturação. Nos tons muito escuros a
     saturação cai de propósito (escuro saturado lê como "sujo").
     Proibido branco absoluto (#fff) e preto absoluto (#000):
     o "branco" e o "preto" são versões tingidas da matiz.
     Exemplo de matiz: 220 (azul). Trocar por projeto.
     ---------------------------------------------------------- */
  --hue: 220;
  --sat: 46%;

  --c-50:  hsl(var(--hue) var(--sat) 95%);  /* "branco" da paleta */
  --c-100: hsl(var(--hue) 44% 88%);
  --c-200: hsl(var(--hue) 44% 78%);
  --c-300: hsl(var(--hue) 45% 66%);
  --c-400: hsl(var(--hue) var(--sat) 58%);
  --c-500: hsl(var(--hue) var(--sat) 50%);  /* cor principal */
  --c-600: hsl(var(--hue) 48% 42%);
  --c-700: hsl(var(--hue) 50% 32%);
  --c-800: hsl(var(--hue) 30% 18%);
  --c-900: hsl(var(--hue) 16% 9%);
  --c-950: hsl(var(--hue) 8% 3%);           /* "preto" da paleta */

  /* Aliases semânticos — usar estes no código de produto */
  --c-bg:      var(--c-50);   /* fundo claro tingido (no lugar do branco) */
  --c-surface: hsl(var(--hue) 40% 99%);
  --c-ink:     var(--c-950);  /* texto principal (no lugar do preto) */
  --c-muted:   var(--c-700);  /* texto secundário */
  --c-border:  var(--c-200);
  --c-primary: var(--c-500);
  --c-primary-strong: var(--c-600);

  /* Cor secundária OPCIONAL — só via esquema de harmonia com a
     principal. Exemplo: complementar (matiz oposta, +180°).
     220 + 180 = 40. Usar com parcimônia (CTA, destaque, alerta);
     fundos extensos e texto corrido continuam na matiz principal. */
  --c-accent: hsl(40 80% 55%);

  /* ----------------------------------------------------------
     TIPOGRAFIA
     6 títulos (H1–H6) + 4 parágrafos (XL/L/M/S).
     Títulos: peso 700, line-height 120%.
     Parágrafos: peso 400, line-height 150%.
     Tamanhos abaixo são DESKTOP; o bloco mobile está em base.css
     (troca em ≤ 880px). A família varia por projeto.
     ---------------------------------------------------------- */
  --ff: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fw-title: 700;
  --fw-body:  400;
  --lh-title: 1.2;
  --lh-body:  1.5;

  --fs-h1: 80px;
  --fs-h2: 64px;
  --fs-h3: 56px;
  --fs-h4: 48px;
  --fs-h5: 40px;
  --fs-h6: 32px;

  --fs-p-xl: 28px;
  --fs-p-l:  24px;
  --fs-p-m:  20px;
  --fs-p-s:  16px;

  /* ----------------------------------------------------------
     ESPAÇAMENTO — escala de 8 e 16
     Todo gap/padding/margin usa SÓ estes 12 valores.
     Valores fora da escala (10, 12, 20, 28, 48, 56, 72, 100,
     144, 200, 240) são proibidos. Faltou? Sobe pro próximo.
     ---------------------------------------------------------- */
  --sp-8:   8px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-128: 128px;
  --sp-168: 168px;
  --sp-192: 192px;
  --sp-256: 256px;

  /* ----------------------------------------------------------
     RAIOS — só três valores no sistema inteiro
     Qualquer outro (2, 6, 12, 16, 32) é proibido.
     ---------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 24px;

  /* ----------------------------------------------------------
     SOMBRA — ou o efeito completo, ou nada
     Stack de 5 camadas progressivas (quase invisível → visível).
     Não cortar camadas, não mudar distâncias, não mudar a cor
     base rgba(10, 39, 41, …).
     ---------------------------------------------------------- */
  --shadow:
    0 413px 116px 0 rgba(10, 39, 41, 0.00),
    0 264px 106px 0 rgba(10, 39, 41, 0.01),
    0 149px 89px  0 rgba(10, 39, 41, 0.02),
    0 66px  66px  0 rgba(10, 39, 41, 0.03),
    0 17px  36px  0 rgba(10, 39, 41, 0.04);

  /* ----------------------------------------------------------
     GRID / WORKSPACE — largura útil fixa, centralizada,
     dividida em colunas iguais separadas por gutters.
     Valores default = Desktop. base.css ajusta por breakpoint.
     ---------------------------------------------------------- */
  --workspace: 1280px;  /* largura útil (cap; Wide ≥2400 reusa) */
  --cols: 12;
  --gutter: 32px;

  /* ----------------------------------------------------------
     BOTÕES — 3 tamanhos. Peso sempre 400; escala de fonte
     própria (independente da hierarquia tipográfica).
     Exceção conhecida: padding lateral 48px do médio está fora
     da escala de espaçamento — é exceção explícita do design.
     ---------------------------------------------------------- */
  --btn-sm-fs: 16px;  --btn-sm-px: 32px;  --btn-sm-py: 16px;
  --btn-md-fs: 20px;  --btn-md-px: 48px;  --btn-md-py: 24px; /* 48 = exceção */
  --btn-lg-fs: 24px;  --btn-lg-px: 32px;  --btn-lg-py: 32px;
  --btn-fw: 400;
}