/* ============================================================
   INDIKEY — DESIGN TOKENS
   Fonte única de verdade da identidade visual.
   Regra de ouro: nenhum arquivo deve declarar cor, raio,
   sombra ou espaçamento "solto". Sempre via token.
   ============================================================ */
:root{

  /* ---------- 1. MARCA -------------------------------------
     Azul Indikey é a cor de ação e de marca.
     Ciano é ACENTO — usado em detalhes, nunca em áreas grandes.
     Regra: gradiente só existe em 2 lugares (glow do hero e
     botão primário). Todo o resto é cor sólida.            */
  --ik-blue-50:#eef4ff;
  --ik-blue-100:#dbe7ff;
  --ik-blue-200:#bcd2ff;
  --ik-blue-300:#8fb4ff;
  --ik-blue-400:#5d90ff;
  --ik-blue-500:#2f6dff;
  --ik-blue-600:#126bff;   /* núcleo da marca */
  --ik-blue-700:#0b47c2;
  --ik-blue-800:#0a3894;
  --ik-blue-900:#0a2c6f;

  --ik-cyan-300:#7ef0e6;
  --ik-cyan-400:#4be0d4;
  --ik-cyan-500:#00c9c0;
  --ik-cyan-700:#0a7d78;

  /* ---------- 2. NEUTROS -----------------------------------
     Uma única família de cinzas para claro e escuro.       */
  --ik-n-0:#ffffff;
  --ik-n-25:#fafbfd;
  --ik-n-50:#f5f7fb;
  --ik-n-100:#eef1f7;
  --ik-n-200:#e2e6ee;
  --ik-n-300:#cbd2df;
  --ik-n-400:#9aa4b8;
  --ik-n-500:#6f7b93;
  --ik-n-600:#4e5a72;
  --ik-n-700:#333e55;
  --ik-n-800:#1e2739;
  --ik-n-900:#111827;
  --ik-n-950:#0a1120;
  --ik-n-1000:#05070d;

  /* ---------- 3. SEMÂNTICA ---------------------------------- */
  --ik-success:#12a150;
  --ik-success-bg:#e8f7ee;
  --ik-warning:#b26a00;
  --ik-warning-bg:#fdf3e3;
  --ik-danger:#c62d3c;
  --ik-danger-bg:#fdeced;
  --ik-info:#0b62c4;
  --ik-info-bg:#e9f2fe;

  /* ---------- 4. SUPERFÍCIES (tema escuro do site) ---------- */
  --bg:var(--ik-n-1000);
  --bg-2:#070c16;
  --bg-3:#04060b;
  --surface-1:rgba(255,255,255,.022);
  --surface-2:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --light:var(--ik-n-50);
  --light-2:var(--ik-n-0);
  --light-line:var(--ik-n-200);

  /* ---------- 5. TINTA -------------------------------------- */
  --ink:#eaeef6;
  --ink-soft:#cdd6e6;
  --ink-dim:#8d99b0;
  --ink-faint:#6a7690;
  --dark-ink:#0b1220;
  --dark-ink-dim:#59637a;

  /* ---------- 6. TIPOGRAFIA --------------------------------
     Display = Sora (só títulos e números de destaque).
     Texto   = Manrope (todo o resto, inclusive o painel).  */
  --font-display:'Sora',system-ui,-apple-system,sans-serif;
  --font-text:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  /* aliases legados */
  --serif:var(--font-display);
  --sans:var(--font-text);

  --t-display:clamp(38px,6.2vw,64px);
  --t-h2:clamp(28px,4vw,44px);
  --t-h3:17px;
  --t-statement:clamp(22px,3.2vw,30px);
  --t-lead:clamp(16px,1.6vw,18px);
  --t-body:16.5px;
  --t-small:14.5px;
  --t-micro:12px;

  --lh-tight:1.06;
  --lh-title:1.14;
  --lh-body:1.65;

  --ls-display:-.035em;
  --ls-title:-.025em;
  --ls-eyebrow:.22em;

  /* ---------- 7. ESPAÇO (escala 4pt) ------------------------ */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;
  --s-11:80px; --s-12:112px;
  --section-y:clamp(72px,9vw,110px);

  /* ---------- 8. RAIO --------------------------------------- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  --r-xl:22px; --r-2xl:28px; --r-pill:999px;

  /* ---------- 9. SOMBRA ------------------------------------- */
  --sh-1:0 1px 2px rgba(10,17,32,.06);
  --sh-2:0 4px 14px -6px rgba(10,17,32,.14);
  --sh-3:0 18px 44px -22px rgba(10,17,32,.32);
  --sh-brand:0 12px 30px -14px rgba(18,107,255,.85);

  /* ---------- 10. LAYOUT ------------------------------------ */
  --wrap:1240px;
  --wrap-narrow:980px;
  --pad:32px;
  --header-h:70px;

  /* ---------- 11. MOVIMENTO --------------------------------- */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-1:.18s; --dur-2:.28s; --dur-3:.55s;

  /* ---------- 12. FOCO -------------------------------------- */
  --focus:#7fb0ff;

  /* ---------- 13. GRADIENTES PERMITIDOS --------------------- */
  --grad-brand:linear-gradient(100deg,var(--ik-blue-600),var(--ik-cyan-500));
  --grad-text:linear-gradient(100deg,#8fb6ff,var(--ik-cyan-400));
}

@media (max-width:900px){ :root{ --pad:20px } }