/* Pináculo Sites, tokens.css
 *
 * Todo valor do site nasce aqui. Hex solto fora do :root é bug.
 * Os valores de cor são PLACEHOLDER: troque pelos tons amostrados do
 * material real do cliente (ver references/03-direcao-de-arte.md).
 * Os valores de escala, espaço, easing e duração são o padrão da casa
 * e normalmente não mudam.
 */

:root{
  /* ------------------------------------------------- cor (AMOSTRAR!) */
  --canvas:#0d0c0b;          /* nunca #000 nem #fff, tinja no material */
  --canvas-2:#141211;        /* a segunda superfície, para alternar seção */
  --panel:#1b1917;
  --linha:#2a2724;           /* borda decorativa, hairline */
  --linha-forte:#4a453f;     /* borda interativa, tem que passar 3:1 */
  --texto:#d8d2c8;           /* corpo, tem que passar 4,5:1 no canvas */
  --texto-2:#9a948a;         /* secundário, tem que passar 4,5:1 */
  --texto-forte:#f2ede4;     /* display */
  --acento:#c2601f;          /* a chamada e a ênfase rara, em doses */
  --acento-hover:#d4701f;
  --acento-sussurro:rgba(194,96,31,.18);

  /* ------------------------------------------------- tipografia */
  --f-display:'Instrument Serif', Georgia, serif;   /* TROCAR por face com caráter */
  --f-corpo:'Switzer', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  --t-xs:  clamp(.72rem, .70rem + .10vw, .78rem);
  --t-sm:  clamp(.84rem, .81rem + .15vw, .92rem);
  --t-base:clamp(1rem,   .96rem + .20vw, 1.12rem);
  --t-md:  clamp(1.20rem, 1.12rem + .40vw, 1.50rem);
  --t-lg:  clamp(1.50rem, 1.33rem + .85vw, 2.00rem);
  --t-xl:  clamp(1.90rem, 1.55rem + 1.75vw, 2.70rem);
  --t-2xl: clamp(2.40rem, 1.75rem + 3.25vw, 3.60rem);
  --t-3xl: clamp(3.00rem, 1.80rem + 6.00vw, 5.00rem);
  --t-4xl: clamp(3.60rem, 1.60rem + 10.00vw, 7.50rem);

  --lh-display:.98;
  --lh-titulo:1.12;
  --lh-corpo:1.65;
  --tr-display:-.03em;       /* tracking negativo no display, sempre */
  --tr-titulo:-.015em;
  --tr-caixa:.10em;          /* tracking positivo na caixa alta, sempre */

  /* ------------------------------------------------- espaço, grade de 8 */
  --e-1:8px;   --e-2:16px;  --e-3:24px;  --e-4:32px;
  --e-6:48px;  --e-8:64px;  --e-12:96px;
  --e-16:128px; --e-24:192px; --e-32:256px;

  /* ------------------------------------------------- larguras */
  --larg-estreita:min(100% - var(--e-4) * 2, 760px);
  --larg-normal:min(100% - var(--e-4) * 2, 1200px);
  --larg-larga:min(100% - var(--e-3) * 2, 1480px);
  --medida:68ch;             /* use NO elemento de texto, nunca no container */

  /* ------------------------------------------------- movimento */
  --ease-saida:cubic-bezier(.16,1,.3,1);      /* entrada e revelação */
  --ease-estado:cubic-bezier(.4,0,.2,1);      /* estado e hover */
  --ease-soco:cubic-bezier(.34,1.56,.64,1);   /* impacto, raro */

  --d-instant:120ms;
  --d-rapido:180ms;
  --d-medio:320ms;
  --d-lento:620ms;
  --d-cena:900ms;

  --stagger:80ms;            /* 60 a 150ms, em ordem de leitura */

  /* ------------------------------------------------- legibilidade sobre vídeo */
  --tshadow:0 1px 2px rgba(5,5,10,.95),
            0 3px 12px rgba(5,5,10,.78),
            0 10px 44px rgba(5,5,10,.80);
  --scrim-base:rgba(10,10,18,.62);
  --scrim-banda:rgba(5,5,10,.66);   /* alfa de pico, 0.62 quieto a 0.72 gancho */

  /* ------------------------------------------------- outros */
  --raio:10px;
  --raio-g:18px;
  --borda:1px solid var(--linha);
  --z-nav:50;
  --z-hero-texto:10;
  --z-anel:20;
}

/* O cliente de tema claro, quando o projeto pedir. Redeclare, não inverta. */
:root[data-tema="claro"]{
  --canvas:#f6f3ee;
  --canvas-2:#eeeae3;
  --panel:#ffffff;
  --linha:#ddd7cd;
  --linha-forte:#a8a096;
  --texto:#302c27;
  --texto-2:#5f5950;
  --texto-forte:#1a1714;
  --scrim-base:rgba(20,18,14,.52);
}