/* ════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM · CAMADA 1 — TOKENS (tema: Template 01 · Sereno)
   ════════════════════════════════════════════════════════════════════
   Única fonte de verdade do visual do site. Para retematizar (cores,
   fontes, raios, sombras), altere SOMENTE este arquivo — os componentes
   em components.css consomem apenas os tokens semânticos.

   Estrutura:
   1. Paleta primitiva  — valores brutos de cor (não usar direto)
   2. Tokens semânticos — papéis de cor (usar estes nos componentes)
   3. Tipografia        — família, escala e alturas de linha
   4. Forma             — raios, sombras, camadas (z-index)
   5. Layout            — larguras máximas e espaçamentos de página
   ════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1. PALETA PRIMITIVA ─────────────────────────────────────────── */
  --color-white:      #ffffff;
  --color-cloud-50:   #f6f7fb;   /* fundo alternado */
  --color-cloud-100:  #fafbfd;   /* zebra de tabela */
  --color-cloud-200:  #e3e6ef;   /* bordas */
  --color-ink-900:    #20242e;   /* texto — 15.2:1 sobre branco */
  --color-ink-600:    #4b5263;   /* texto secundário — 7.6:1 sobre branco */
  --color-indigo-700: #4338ca;   /* accent — 8.4:1 sobre branco */
  --color-indigo-800: #3730a3;   /* accent escuro / hover */
  --color-indigo-50:  #eef2ff;   /* fundo suave do accent */
  --color-indigo-100: #e0e7ff;   /* texto suave sobre fundo índigo escuro */
  --color-indigo-200: #c7d2fe;   /* borda suave do accent */
  --color-green-700:  #15803d;   /* positivo */
  --color-red-700:    #b91c1c;   /* negativo / obrigatório */
  --color-red-50:     #fef2f2;   /* fundo suave do negativo */
  --color-red-200:    #fecaca;   /* borda suave do negativo */
  --color-amber-800:  #92400e;   /* aviso (texto) */
  --color-amber-600:  #d97706;   /* aviso (borda) */

  /* ── 2. TOKENS SEMÂNTICOS ────────────────────────────────────────── */
  --bg:                var(--color-white);
  --bg-alt:            var(--color-cloud-50);
  --bg-zebra:          var(--color-cloud-100);
  --card:              var(--color-white);
  --border:            var(--color-cloud-200);
  --text:              var(--color-ink-900);
  --muted:             var(--color-ink-600);
  --text-muted:        var(--muted);            /* alias legado (estilos inline) */
  --accent:            var(--color-indigo-700);
  --accent-dark:       var(--color-indigo-800);
  --accent-soft:       var(--color-indigo-50);
  --accent-soft-border:var(--color-indigo-200);
  --on-accent:         var(--color-white);      /* texto sobre fundo accent */
  --on-dark-soft:      var(--color-indigo-100); /* parágrafo sobre fundo accent-dark */
  --on-dark-softer:    var(--color-indigo-200); /* legenda sobre fundo accent-dark */
  --ok:                var(--color-green-700);
  --no:                var(--color-red-700);
  --no-soft:           var(--color-red-50);
  --no-soft-border:    var(--color-red-200);
  --warn:              var(--color-amber-800);
  --warn-border:       var(--color-amber-600);

  /* ── 3. TIPOGRAFIA ───────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-body:     1.0625rem;                       /* corpo de texto */
  --fs-display:  clamp(2.3rem, 6vw, 4.4rem);      /* h1 da home */
  --fs-h1-doc:   clamp(2rem, 4.5vw, 2.7rem);      /* h1 das páginas internas */
  --fs-h1-hub:   clamp(2.2rem, 5vw, 3.4rem);      /* h1 do hub da metodologia */
  --fs-h2:       clamp(1.7rem, 4vw, 2.5rem);      /* h2 de seção (home) */
  --fs-h2-doc:   1.5rem;                          /* h2 de artigo */
  --fs-h3-doc:   1.18rem;                         /* h3 de artigo */
  --fs-lead:     clamp(1.05rem, 2.2vw, 1.25rem);  /* subtítulo da home */
  --fs-lead-doc: 1.18rem;                         /* lead de artigo */
  --fs-md:       1rem;
  --fs-sm:       0.95rem;
  --fs-xs:       0.88rem;
  --fs-2xs:      0.8rem;
  --fs-overline: 0.75rem;                         /* rótulos uppercase */

  --lh-body: 1.7;
  --lh-doc:  1.75;
  --ls-tight:    -0.02em;                         /* títulos */
  --ls-overline: 0.14em;                          /* rótulos uppercase */

  /* ── 4. FORMA ────────────────────────────────────────────────────── */
  --radius-sm:   8px;     /* itens de navegação, micro elementos */
  --radius-md:   10px;    /* botões pequenos, blocos de código */
  --radius-lg:   12px;    /* botões grandes, callouts, pager */
  --radius-xl:   16px;    /* cartões */
  --radius-2xl:  20px;    /* bandas de destaque */
  --radius-pill: 999px;   /* badges */

  --shadow-card: 0 4px 18px rgba(32, 36, 46, 0.06);
  --shadow-card-hover: 0 12px 28px rgba(32, 36, 46, 0.10);
  --shadow-cta:  0 8px 24px rgba(67, 56, 202, 0.18);

  --z-nav:  100;
  --z-skip: 200;

  /* ── 5. LAYOUT ───────────────────────────────────────────────────── */
  --w-container: 68rem;   /* seções da home */
  --w-doc:       1180px;  /* grade sidebar + conteúdo */
  --w-doc-main:  760px;   /* coluna de leitura */
  --w-hub:       880px;   /* hub da metodologia */
  --pad-x:       5%;      /* respiro lateral padrão */
  --pad-section: 5rem;    /* respiro vertical das seções da home */
}