/* ==========================================================================
   TOKENS
   Tudo que e cor, tamanho, espaco e ritmo mora aqui.

   A direcao veio da propria arte do Tiago para a Deloitte: fundo quase
   preto com verde, luz vinda de dentro, tipografia clara e elementos de
   traco fino. O site inteiro agora vive nesse mundo, sem alternar claro e
   escuro: o contraste vem da luz do fundo, nao da troca de fundo.
   ========================================================================== */

:root {

  /* --- Base escura --- */
  --ink:       #0a0b0c;   /* cinza chumbo, quase preto */
  --bg:        #0a0b0c;
  --bg-2:      #121415;
  --paper:     #f2f3f2;   /* as secoes claras */
  --fg:        #ffffff;
  --fg-2:      rgba(255, 255, 255, .60);
  --fg-3:      rgba(255, 255, 255, .34);

  /* --- Verde --- */
  --accent:      #47ee01;   /* o verde claro da Deloitte */
  --accent-ink:  #6bf22e;   /* verde de TEXTO sobre fundo escuro */
  --accent-glow: #47ee01;   /* o mesmo verde, usado como luz */
  --accent-deep: #0d5a02;

  --rule:      rgba(255, 255, 255, .14);
  --rule-soft: rgba(255, 255, 255, .07);
  --ph-line:   rgba(255, 255, 255, .18);
  --ph-fill:   rgba(255, 255, 255, .03);

  /* --- Moldura fixa --- */
  --chrome-fg:   #ffffff;
  --chrome-fg-2: rgba(255, 255, 255, .58);
  --chrome-rule: rgba(255, 255, 255, .16);

  /* --- Tipografia --- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", Courier, monospace;

  --fs-label: clamp(9px, .68vw, 11px);
  --fs-body:  clamp(14px, 1.05vw, 16px);
  --fs-lead:  clamp(17px, 1.6vw, 24px);
  --fs-md:    clamp(26px, 3.4vw, 52px);
  --fs-lg:    clamp(34px, 6.2vw, 92px);
  --fs-xl:    clamp(42px, 9.4vw, 150px);
  --fs-num:   clamp(64px, 15vw, 230px);

  --lh-tight: .94;
  --lh-mid:   1.12;
  --lh-body:  1.55;

  --tr-label:  .16em;
  --tr-tight: -.035em;

  /* --- Espaco --- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: clamp(96px, 12vh, 160px);
  --s8: clamp(140px, 22vh, 260px);

  --gutter: clamp(20px, 5vw, 88px);
  --maxw:   1560px;

  /* --- Movimento --- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast:    .28s;
  --t-mid:     .5s;
  --t-slow:    .9s;

  /* --- Camadas --- */
  --z-ambient: 1;
  --z-content: 2;
  --z-dot:     40;
  --z-hud:     50;
  --z-nav:     60;
  --z-cursor:  90;

  /* --- Canto cortado, o corte angular da arte de referencia --- */
  --cut: 12px;
}

/* O ato escuro deixou de ser excecao: agora e o site inteiro. A classe
   continua existindo para nao quebrar o HTML e o JavaScript que a leem. */
.act--ink { --bg: var(--ink); }
html.nav-ink .nav,
html.hud-ink .hud { --chrome-fg: #ffffff; }