/* ============================================================
   SOPRO — Design System · variables.css
   Paleta: azul sereno + escuro quente | Mobile-first
   ============================================================ */

:root {

  /* ── Fundos ──────────────────────────────────────────────
     Escuro levemente quente — não frio, não de "terminal"    */
  --cor-fundo:          #0f1116;
  --cor-fundo-alt:      #131720;
  --cor-superficie:     #181c28;
  --cor-superficie-alt: #1e2234;
  --cor-borda:          #252a3c;
  --cor-borda-sutil:    #1c2036;

  /* ── Acento principal — Azul Sereno ─────────────────────
     Periwinkle-azul calmo. Nem elétrico, nem frio, nem roxo.
     Evoca céu antes do amanhecer, calma, esperança.          */
  --cor-primaria:       #5c80e0;
  --cor-primaria-hover: #7094eb;
  --cor-primaria-press: #4a69ca;
  --cor-primaria-sutil: rgba(92, 128, 224, 0.10);
  --cor-primaria-foco:  rgba(92, 128, 224, 0.18);

  /* ── Texto ───────────────────────────────────────────────  */
  --cor-texto:            #dde1eb;
  --cor-texto-secundario: #7c849c;
  --cor-texto-sutil:      #3c4259;
  --cor-texto-invertido:  #0f1116;

  /* ── Feedback ────────────────────────────────────────────  */
  --cor-sucesso:       #4eca8b;
  --cor-sucesso-sutil: rgba(78, 202, 139, 0.10);
  --cor-aviso:         #f0b652;
  --cor-aviso-sutil:   rgba(240, 182, 82, 0.10);
  --cor-erro:          #e06b6b;
  --cor-erro-sutil:    rgba(224, 107, 107, 0.10);

  /* ── Tipografia ──────────────────────────────────────────
     Stack humanista de sistema — sem CDN externo.
     Prioriza Inter/San Francisco nas plataformas modernas.   */
  --fonte-principal: ui-sans-serif, system-ui, -apple-system,
                     BlinkMacSystemFont, 'Segoe UI', Helvetica,
                     Arial, sans-serif;
  --fonte-mono:      ui-monospace, 'Cascadia Code', 'Fira Code',
                     'Consolas', monospace;

  /* Escala de tamanhos — razão 1.25 (Major Third) */
  --tipo-xs:   0.75rem;    /* 12px */
  --tipo-sm:   0.875rem;   /* 14px */
  --tipo-base: 1rem;       /* 16px */
  --tipo-md:   1.125rem;   /* 18px */
  --tipo-lg:   1.25rem;    /* 20px */
  --tipo-xl:   1.5625rem;  /* 25px */
  --tipo-2xl:  1.953rem;   /* 31px */
  --tipo-3xl:  2.441rem;   /* 39px */
  --tipo-4xl:  3.052rem;   /* 49px — só para logo/hero */

  /* Aliases legados (usados no app.js) */
  --tamanho-xs:   var(--tipo-xs);
  --tamanho-sm:   var(--tipo-sm);
  --tamanho-base: var(--tipo-base);
  --tamanho-md:   var(--tipo-md);
  --tamanho-lg:   var(--tipo-lg);
  --tamanho-xl:   var(--tipo-xl);
  --tamanho-2xl:  var(--tipo-2xl);
  --tamanho-3xl:  var(--tipo-3xl);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;

  --entrelinha-apertada: 1.2;
  --entrelinha-titulo:   1.3;
  --entrelinha-normal:   1.6;
  --entrelinha-larga:    1.75;

  /* ── Espaçamento — escala de 4px ────────────────────────  */
  --esp-1:  0.25rem;   /* 4px  */
  --esp-2:  0.5rem;    /* 8px  */
  --esp-3:  0.75rem;   /* 12px */
  --esp-4:  1rem;      /* 16px */
  --esp-5:  1.25rem;   /* 20px */
  --esp-6:  1.5rem;    /* 24px */
  --esp-8:  2rem;      /* 32px */
  --esp-10: 2.5rem;    /* 40px */
  --esp-12: 3rem;      /* 48px */
  --esp-16: 4rem;      /* 64px */
  --esp-20: 5rem;      /* 80px */

  /* Aliases semânticos */
  --esp-xs:  var(--esp-1);
  --esp-sm:  var(--esp-2);
  --esp-md:  var(--esp-4);
  --esp-lg:  var(--esp-6);
  --esp-xl:  var(--esp-8);
  --esp-2xl: var(--esp-12);
  --esp-3xl: var(--esp-16);

  /* ── Bordas ──────────────────────────────────────────────  */
  --raio-xs:   4px;
  --raio-sm:   8px;
  --raio-md:   12px;
  --raio-lg:   16px;
  --raio-xl:   24px;
  --raio-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────  */
  --sombra-xs:      0 1px 3px rgba(0, 0, 0, 0.30);
  --sombra-sm:      0 2px 8px rgba(0, 0, 0, 0.35);
  --sombra-md:      0 4px 20px rgba(0, 0, 0, 0.40);
  --sombra-lg:      0 8px 40px rgba(0, 0, 0, 0.50);
  --sombra-primaria: 0 4px 24px rgba(92, 128, 224, 0.18);

  /* ── Transições ──────────────────────────────────────────  */
  --t-rapida:  120ms ease;
  --t-media:   220ms ease;
  --t-lenta:   380ms ease;

  /* Aliases legados */
  --transicao-rapida: var(--t-rapida);
  --transicao-media:  var(--t-media);
  --transicao-lenta:  var(--t-lenta);

  /* ── Layout ──────────────────────────────────────────────  */
  --largura-maxima: 480px;
  --altura-header:  56px;
  --altura-nav:     60px;

  /* ── Z-index ─────────────────────────────────────────────  */
  --z-base:     1;
  --z-elevado:  10;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
}