/* =====================================================================
   Tokens — a única fonte de cor, tipo e espaçamento da página.
   Nenhum valor cru de cor deve aparecer nos outros arquivos.
   ===================================================================== */

/* Fontes servidas do próprio domínio: sem @import bloqueante e sem
   depender de CDN de terceiros no carregamento. */
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Mono';
  src:url('../fonts/dm-mono-400-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../fonts/dm-mono-500-latin.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  /* --- superfícies --- */
  --bg:#000000;
  --panel:#0c0b11;
  --panel-2:#12101a;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.18);

  /* --- texto: quatro degraus, e só estes ---
     Substituem os dez cinzas quase iguais que existiam antes. Toda cor de
     texto da página sai de um destes quatro. */
  --text:#f8f7fb;     /* títulos, números, o que se lê primeiro */
  --text-2:#d8d5e2;   /* corpo de texto */
  --text-3:#9c99aa;   /* apoio, legendas, rótulos */
  --text-4:#6f6b7a;   /* metadados, unidades, o que só se lê de perto */

  /* --- marca --- */
  --purple:#8b45ff;
  --purple-2:#c28cff;
  --cyan:#78e4e7;
  --green:#a9ecb8;
  --amber:#ffbd2e;

  /* --- tipografia --- */
  --sans:'Space Grotesk',Inter,system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,monospace;

  /* Um degrau só de tamanho, para os tamanhos não brotarem soltos. */
  --fs-xs:11.5px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:17px;
  --fs-xl:20px;

  /* --- forma --- */
  --r-sm:8px; --r:12px; --r-lg:16px;
  --max:1200px;
  --rail:264px;

  /* --- superfícies translúcidas ---
     Três degraus de véu branco e dois de roxo. Qualquer tinta nova deve sair
     daqui em vez de virar mais um rgba solto. */
  --tint-1:rgba(255,255,255,.035);
  --tint-2:rgba(255,255,255,.05);
  --tint-3:rgba(255,255,255,.07);
  --accent-tint:rgba(139,69,255,.14);
  --accent-tint-2:rgba(139,69,255,.2);
  --scrim:rgba(2,2,4,.72);
  --fade:rgba(0,0,0,.88);
  --aura:rgba(139,69,255,.16);
  --select:rgba(139,69,255,.40);
  --purple-hover:#7a35ee;
  --on-accent:#ffffff;

  /* --- bordas de destaque --- */
  --purple-line:rgba(194,140,255,.32);
  --cyan-line:rgba(120,228,231,.32);
  --green-line:rgba(169,236,184,.32);
  --warn:#ff9b7a;
  --warn-line:rgba(255,120,80,.34);

  /* --- famílias de capacidade ---
     Um par texto/borda por grupo. É um conjunto categórico de verdade: cada
     hue identifica um tipo de capacidade, e não há valor avulso fora dele. */
  --cap-reason:#d6b6ff; --cap-reason-line:rgba(176,107,255,.30);
  --cap-vision:#9fe6e8; --cap-vision-line:rgba(120,228,231,.28);
  --cap-fn:#ffd9a0;     --cap-fn-line:rgba(255,190,110,.28);
  --cap-sec:#a9ecb8;    --cap-sec-line:rgba(169,236,184,.30);
  --cap-code:#a8c8ff;   --cap-code-line:rgba(130,170,255,.30);
  --cap-web:#f3b5ff;    --cap-web-line:rgba(230,150,255,.28);
  --cap-audio:#ffc9de;  --cap-audio-line:rgba(255,150,190,.28);

  /* --- profundidade ---
     Uma sombra neutra para elevação real. O brilho colorido fica reservado
     para o foco e para o estado ativo, não para toda superfície roxa. */
  --shadow:0 14px 34px -16px rgba(0,0,0,.8);
  --focus:0 0 0 3px rgba(139,69,255,.28);
}