/* ============================================================
   bmcoder — Design tokens (estruturais)
   Cores e fontes de marca ficam em theme.css, gerado a partir
   de content/site.json pelo build. Aqui só o que não muda.
   ============================================================ */

:root {
  /* ---- Escala tipográfica (proporção 1.28, não linear) ---- */
  --text-display: clamp(2.15rem, 1.35rem + 3.5vw, 4.05rem);
  --text-h1:      clamp(2rem, 1.35rem + 2.6vw, 3.35rem);
  --text-h2:      clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
  --text-h3:      clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem);
  --text-lead:    clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem);
  --text-body:    1rem;
  --text-sm:      0.9rem;
  --text-xs:      0.78rem;
  --text-mono:    0.735rem;

  --leading-tight:   1.1;
  --leading-snug:    1.22;
  --leading-normal:  1.72;
  --leading-relaxed: 1.78;

  --tracking-tight: -0.032em;
  --tracking-snug:  -0.018em;
  --tracking-mono:   0.13em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  /* Títulos em sans geométrica precisam de peso para ter presença;
     com um serif de display isto voltaria para 400. */
  --weight-display: 600;

  /* ---- Ritmo espacial: não é múltiplo de 8 uniforme.
         Cresce ~1.5x para criar hierarquia perceptível. ---- */
  --s-1:  0.375rem;
  --s-2:  0.625rem;
  --s-3:  1rem;
  --s-4:  1.5rem;
  --s-5:  2.25rem;
  --s-6:  3.5rem;
  --s-7:  5.5rem;
  --s-8:  8rem;
  --s-9:  11rem;

  --section-y:  clamp(4.5rem, 3rem + 6vw, 9rem);
  --section-y-tight: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* ---- Raios: diferenciados por função, não uniformes ---- */
  --r-flat:   2px;   /* tags, chips, barras */
  --r-input:  var(--radius, 6px);
  --r-card:   calc(var(--radius, 6px) * 1.6);
  --r-media:  calc(var(--radius, 6px) * 2);
  --r-pill:   999px;

  /* ---- Sombras com direção de luz coerente (luz vinda de cima,
         levemente à esquerda) e matiz da tinta, não preto puro ---- */
  --shadow-raise: 0 1px 2px rgba(10, 21, 42, 0.05),
                  0 2px 6px -2px rgba(10, 21, 42, 0.06);
  --shadow-card:  0 2px 4px -2px rgba(10, 21, 42, 0.06),
                  0 12px 28px -12px rgba(10, 21, 42, 0.13);
  --shadow-lift:  0 4px 8px -4px rgba(10, 21, 42, 0.08),
                  0 24px 48px -20px rgba(10, 21, 42, 0.20);
  --shadow-glow:  0 10px 30px -12px color-mix(in srgb, var(--c-brand) 55%, transparent);

  /* ---- Movimento ---- */
  --ease-out:  cubic-bezier(0.16, 0.84, 0.28, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 520ms;

  /* ---- Estrutura ---- */
  --wrap:        1180px;
  --wrap-narrow: 720px;
  --wrap-wide:   1340px;
  --gutter:      clamp(1.25rem, 4vw, 2.75rem);
  --header-h:    76px;
  --rule:        1px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}