/* ══════════════════════════════════════════════
   tokens.css — v4.0 · UI Craft Saulo B_ 2027
   O que mudou da v3.2: cor, grid, grafismo e textura.
   Tipografia, espaçamento, raio, z-index e motion seguem a v3.2.

   Cor em três camadas:
   - Papel  — a base neutra, off-white e creme (claro) / preto-verde (escuro)
   - Tinta  — o texto, quase preto com fundo verde / creme no escuro
   - Verde  — o acento, no mesmo lugar sutil em que o azul estava
   O branco 100% (--luz) não é fundo: é ponto de luz — brilho de borda,
   nó ativo de um grafismo, seleção. Se aparecer em área grande, está errado.
══════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── Papel ── */
  --papel:          #F3F0E8;   /* fundo da página */
  --papel-1:        #F8F6F0;   /* superfície: card, painel */
  --papel-2:        #ECE8DD;   /* superfície rebaixada: trilho, campo */
  --linha:          #DDD8CB;   /* borda padrão */
  --linha-forte:    #C9C3B3;   /* borda de ênfase, divisor de seção */

  /* ── Tinta ── */
  --tinta:          #161915;   /* títulos e corpo */
  --tinta-2:        #4B4F48;   /* corpo de apoio */
  --tinta-3:        #696C64;   /* rótulo, metadado, legenda — 4,9:1 no papel */
  --tinta-4:        #A19F95;   /* desabilitado, régua */

  /* ── Verde — o acento ── */
  --verde:          #1F5C40;   /* CTA, eyebrow, link — 7,4:1 no papel */
  --verde-hover:    #184A33;
  --verde-fundo:    #0F3324;   /* profundidade, gradiente */
  --verde-claro:    #86C29F;   /* verde em fundo escuro */
  --salvia:         #B7CBB9;   /* tinte decorativo */
  --salvia-claro:   #DCE6DB;   /* tinte suave */
  --verde-ghost:    rgba(31,92,64,.07);
  --verde-borda:    rgba(31,92,64,.22);
  --verde-anel:     rgba(31,92,64,.45);  /* :focus-visible */

  /* ── Verde vivo — brilho, não leitura ──
     Logo, cursor do underscore, ponto que anda na órbita, sinal em gráfico.
     Não passa em AA para texto corrido de propósito: nunca é parágrafo. */
  --verde-vivo:     #1FA35C;
  --verde-vivo-brilho: rgba(31,163,92,.35);
  /* underline do logotipo: o verde vivo do fundo em que está */
  --cursor:         var(--verde-vivo);
  --cursor-brilho:  0 0 6px rgba(31,163,92,.35);

  /* ── Prancha — a placa verde quadriculada (uso pontual) ── */
  --prancha:        #234A3B;
  --prancha-fundo:  #183428;
  --prancha-linha:  rgba(236,231,218,.16);
  --prancha-linha-forte: rgba(236,231,218,.32);
  --prancha-tinta:  #ECE7DA;   /* traço e texto sobre a prancha */

  /* ── Luz — branco 100%, só pontual ── */
  --luz:            #FFFFFF;
  --brilho:         inset 0 1px 0 rgba(255,255,255,.75);

  /* ── Semântica (mantida da v3.2, afinada para o papel) ── */
  --ok:             #2E6B3F;
  --ok-fundo:       rgba(46,107,63,.08);
  --alerta:         #9A5414;
  --alerta-fundo:   rgba(154,84,20,.08);
  --erro:           #A8382B;
  --erro-fundo:     rgba(168,56,43,.08);

  /* ── Tipografia (v3.2) + mono para dado técnico ── */
  --font:           'Space Grotesk', system-ui, sans-serif;
  --mono:           'IBM Plex Mono', ui-monospace, monospace;
  --lh-hero:        1.04;
  --lh-heading:     1.15;
  --lh-snug:        1.4;
  --lh-body:        1.55;   /* era 1,72: entrelinha mais justa, o respiro vai para o espaço entre parágrafos */
  --lh-compact:     1.5;

  /* ── Raio, sombra ── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;
  --sh-sm: 0 1px 2px rgba(22,25,21,.05), 0 1px 4px rgba(22,25,21,.04);
  --sh-md: 0 4px 16px rgba(22,25,21,.07);
  --sh-lg: 0 16px 48px rgba(22,25,21,.10);

  /* ── Motion (v3.2) + desenho de linha ── */
  --ease-out:       cubic-bezier(.25,.46,.45,.94);
  --ease-spring:    cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:    cubic-bezier(.4,0,.2,1);
  --ease-traco:     cubic-bezier(.65,0,.35,1);   /* linha que se desenha */
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-xslow: 600ms;
  --dur-traco:      1400ms;
  --dur-orbita:     90s;                           /* rotação de fundo, quase parada */

  /* ── Espaço (v3.2) ── */
  --container-lg: 1200px; --container-md: 1024px; --container-sm: 840px;
  --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 40px; --gap-2xl: 48px; --gap-3xl: 64px;
  --section-v: 104px; --section-v-mob: 56px;

  /* ── Grid ── */
  --grid-colunas:   12;
  --grid-gutter:    24px;
  --quadro-menor:   8px;    /* módulo da prancha */
  --quadro-maior:   40px;   /* 5 módulos */
  /* opacidade da grade da prancha: baixa por padrão, para o conteúdo ficar
     num fundo quase liso; "forte" só onde uma máscara a faz sumir */
  --grade-menor:        .06;
  --grade-maior:        .13;
  --grade-menor-forte:  .16;
  --grade-maior-forte:  .34;

  /* ── Textura ── */
  --grao-opacidade: .05;
  --giz-opacidade:  .22;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papel:          #0C0F0D;
  --papel-1:        #131714;
  --papel-2:        #191E1A;
  --linha:          #252B26;
  --linha-forte:    #343B35;
  --tinta:          #ECE8DF;
  --tinta-2:        #B2B3AA;
  --tinta-3:        #888B82;
  --tinta-4:        #5A5D56;
  --verde:          #86C29F;
  --verde-hover:    #A0D3B4;
  --verde-fundo:    #0F3324;
  --salvia:         #2E4A3B;
  --salvia-claro:   #1B2A22;
  --verde-ghost:    rgba(134,194,159,.08);
  --verde-borda:    rgba(134,194,159,.24);
  --verde-anel:     rgba(134,194,159,.5);
  --verde-vivo:     #4FD68E;
  --verde-vivo-brilho: rgba(79,214,142,.4);
  --cursor:         var(--verde-vivo);
  --cursor-brilho:  0 0 8px rgba(79,214,142,.55);
  --prancha:        #17322A;
  --prancha-fundo:  #0F241D;
  --brilho:         inset 0 1px 0 rgba(255,255,255,.06);
  --ok:             #7DBF8E; --ok-fundo: rgba(125,191,142,.1);
  --alerta:         #E0A262; --alerta-fundo: rgba(224,162,98,.1);
  --erro:           #E58A7E; --erro-fundo: rgba(229,138,126,.1);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 4px 16px rgba(0,0,0,.45);
  --sh-lg: 0 16px 48px rgba(0,0,0,.55);
  --grao-opacidade: .07;
}