/* ============================================================
   TecnoSimples — Design Tokens
   Sistema padronizado em OKLCH.
   Brand red #8C1A1A travado pela marca (cor do logo).
   Neutros: eixo único quente (matiz 75°, passos regulares de L).
   Brick: matiz do logo (27°).
   ============================================================ */
:root {
  /* ---- Brick · acento (matiz 27°) ---- */
  --ts-brick-900: #590A0B;   /* hover / profundidade            */
  --ts-brick-700: #8C1A1A;   /* PRIMÁRIA — travada (logo)       */
  --ts-brick-500: #C44C44;   /* acento legível sobre escuro     */
  --ts-brick-300: #EA9187;   /* realce sutil                    */

  /* ---- Neutros · eixo quente (matiz 75°) ---- */
  --ts-neutral-950: #100E0B; /* fundo profundo                  */
  --ts-neutral-900: #141210; /* fundo base                      */
  --ts-neutral-850: #1B1916; /* superfície                      */
  --ts-neutral-800: #22201D; /* superfície elevada              */
  --ts-neutral-700: #2C2A27; /* linha / borda                   */
  --ts-neutral-600: #383633; /* borda forte                     */
  --ts-neutral-400: #777471; /* texto desativado                */
  --ts-neutral-300: #9C9996; /* texto secundário                */
  --ts-neutral-200: #C0BDBA; /* corpo                           */
  --ts-neutral-100: #E8E6E3; /* corpo forte                     */
  --ts-white:       #FFFFFF; /* títulos                         */

  /* ---- Referência (NÃO usar como cor de UI) ---- */
  --ts-logo-gray:   #818386; /* cinza estrutural — vive só no logo */

  /* ---- Aliases semânticos ---- */
  --ts-bg:            var(--ts-neutral-900);
  --ts-surface:       var(--ts-neutral-850);
  --ts-surface-2:     var(--ts-neutral-800);
  --ts-border:        var(--ts-neutral-700);
  --ts-border-strong: var(--ts-neutral-600);
  --ts-heading:       var(--ts-white);
  --ts-text:          var(--ts-neutral-100);
  --ts-text-2:        var(--ts-neutral-200);
  --ts-text-muted:    var(--ts-neutral-300);
  --ts-accent:        var(--ts-brick-700);
  --ts-accent-on-dark:var(--ts-brick-500);

  /* ---- Tipografia ---- */
  --ts-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ts-font-body:    'Inter', system-ui, sans-serif;
  --ts-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ts-fs-display: clamp(2.5rem, 6vw, 3.25rem);   /* 52px · Space Grotesk 700 */
  --ts-fs-h1:      clamp(2rem, 4.5vw, 2.375rem);  /* 38px · Space Grotesk 700 */
  --ts-fs-h2:      clamp(1.5rem, 3.2vw, 1.75rem); /* 28px · Space Grotesk 600 */
  --ts-fs-h3:      clamp(1.2rem, 2vw, 1.3125rem); /* 21px · Space Grotesk 600 */
  --ts-fs-body-l:  1.125rem;   /* 18px · Inter 400 */
  --ts-fs-body:    1rem;       /* 16px · Inter 400 */
  --ts-fs-small:   0.875rem;   /* 14px · Inter 400 */
  --ts-fs-label:   0.75rem;    /* 12px · Inter 600 · UPPERCASE · ls .16em */
  --ts-fs-micro:   0.6875rem;  /* 11px · Inter 500 */

  /* ---- Espaçamento (base 4 / 8) ---- */
  --ts-space-1: 4px;  --ts-space-2: 8px;  --ts-space-3: 12px;
  --ts-space-4: 16px; --ts-space-6: 24px; --ts-space-8: 32px;
  --ts-space-12: 48px; --ts-space-16: 64px; --ts-space-24: 96px;

  /* ---- Raio (discreto · marca técnica) ---- */
  --ts-radius-sm: 2px; --ts-radius-md: 3px; --ts-radius-lg: 4px;

  /* ---- Layout ---- */
  --ts-container: 1080px;  /* largura máx. de conteúdo */
  --ts-prose:     640px;   /* medida ideal de leitura (60–75 car.) */
}