/* Grupo Dls/ - tokens do sistema
   Valores fechados na seção 4 do spec. Nada de cor, tempo ou espaço
   fora daqui: se um componente precisa de um valor novo, ele vira token. */

:root {
  /* ---------- cor ---------- */
  /* Preto puro é decisão de marca, não descuido: os key visuals são #000 e o
     vídeo do hero encosta no fundo. Um off-black criaria costura visível. */
  --c-black: #000000;
  --c-offwhite: #f1f1f1;
  --c-white: #ffffff;

  --c-yellow: #ffdd00;   /* Grupo Dls/ e Dls/ Comunicação */
  --c-blue: #0153ff;     /* Elleven Digital */
  --c-lime: #d3ff35;     /* Metrik */

  /* Colocação em premiação. Três valores fechados pela CEO, e não uma
     interpretação de metal: pintam o olho e a borda do cartão em
     `cs--premios`. Moram aqui porque toda cor nomeada mora aqui. */
  --c-bronze: #9d593f;
  --c-prata: #787878;
  --c-ouro: #9d8904;

  --c-gray-on-dark: #8a8a8a;
  --c-gray-on-light: #3a3a3a;
  --c-line-dark: rgba(255, 255, 255, 0.16);
  --c-line-light: rgba(0, 0, 0, 0.12);

  /* Gradiente-assinatura: a mistura aritmética das três unidades.
     Azul Elleven + amarelo Dls/ = verde, e o lime Metrik mora entre os dois. */
  --grad-1: #0153ff;
  --grad-2: #4fa3ff;
  --grad-3: #35c24a;
  --grad-4: #d3ff35;
  --grad-5: #ffdd00;

  /* ---------- tema corrente ----------
     Trocado por cena. Todo componente lê daqui, nunca da paleta bruta. */
  --bg: var(--c-black);
  --fg: var(--c-white);
  --fg-muted: var(--c-gray-on-dark);
  --line: var(--c-line-dark);
  --fg-invert: var(--c-black);
  --bg-invert: var(--c-white);

  /* ---------- tipografia ---------- */
  --ff: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* O numeral não é a manchete da seção, é a prova dela. A 12rem ele
     competia com o H1 do hero e endurecia a página inteira; nesta
     escala ele fica por volta de 80px no desktop largo, que é onde o
     algarismo ainda para o olho sem gritar. */
  --fs-numeral: clamp(2.75rem, 1.8rem + 3vw, 5rem);
  --fs-display-xl: clamp(2.25rem, 1rem + 5.1vw, 4.75rem);

  /* Uma escala acima do display-xl, e ela existe para uma frase só:
     `Marca Inteira®` na cena 3 da /grupo, que precisa tomar a tela. O
     display-xl para em 4,75rem e a 1440px isso ocupa um terço da altura. */
  --fs-display-xxl: clamp(3rem, 1rem + 11vw, 11rem);
  --fs-display-l: clamp(2rem, 1rem + 4.4vw, 5rem);
  --fs-display-m: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --fs-title: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  --fs-body-l: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;

  --lh-numeral: 0.9;
  --lh-display: 1.02;
  --lh-body: 1.6;

  /* O justificado tem entrelinha própria, e bem mais larga que a do
     display normal. A 1.02 as três linhas de caixa alta do H1 formavam
     um bloco fechado, sem ar entre elas - em FHD isso vira uma parede.
     O justificado já alarga os vãos horizontais; a entrelinha larga é o
     que dá ao bloco a mesma respiração nos dois eixos. */
  --lh-justified: 1.5;

  --tr-display: -0.03em;
  --tr-label: 0.14em;

  /* ---------- forma ----------
     O squircle do arquivo de marca é rx 87.9 sobre lado 423.1 = 20.8%.
     O raio é sempre 20,8% do LADO MENOR, e o canto é sempre um arco
     circular — é o que mantém a forma estritamente igual a
     assets/squircle.svg em qualquer tamanho.

     Em porcentagem, o raio horizontal é relativo à largura e o vertical
     à altura. Num box quadrado 20.8% já resolve os dois. Fora do
     quadrado é preciso reduzir o eixo maior na mesma razão, senão o
     canto vira elipse. Daí um token por proporção usada na página.
       4/5 retrato:   menor = largura → v = 20.8% x 4/5  = 16.64%
       4/3 paisagem:  menor = altura  → h = 20.8% x 3/4  = 15.6%
       16/9 paisagem: menor = altura  → h = 20.8% x 9/16 = 11.7%

     Não use unidade de container query aqui. Um elemento não é
     container de si mesmo: `container-type` no próprio elemento faz
     `cqmin` cair para a viewport, e o raio vira 20,8% da tela — foi
     assim que o loader, o núcleo das frentes e as capas de case
     viraram círculo.

     Um raio por função, e a regra é essa em toda a página:
     squircle em superfície, pílula em interativo, 10px em campo de
     formulário. Sistema misto só vale documentado, e este está. */
  --r-squircle: 20.8%;
  --r-squircle-4x5: 20.8% / 16.64%;
  --r-squircle-4x3: 15.6% / 20.8%;
  --r-squircle-16x9: 11.7% / 20.8%;

  /* Retrato 2:3 — os arquivos de `assets/img/sobre` são 1024x1536.
     O raio é 20,8% do lado MENOR, que num retrato é a LARGURA. No eixo
     vertical ele tem de cair na mesma razão, senão o canto vira elipse:
     20.8% x 2/3 = 13.87%. Sem este token os retratos da /grupo usariam
     o 4x5 e o canto de cima ficaria 3,2% mais fechado que o de baixo. */
  --r-squircle-2x3: 20.8% / 13.87%;
  --r-pill: 999px;
  --r-input: 10px;

  /* ---------- espaço ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  --gutter: 24px;
  --margin: clamp(20px, 4vw, 64px);
  --maxw: 1440px;
  --measure: 68ch;

  /* ---------- motion ---------- */
  --dur-micro: 120ms;
  --dur-base: 420ms;
  --dur-scene: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expand: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- camadas ----------
     Escala fechada. Nenhum componente inventa z-index fora desta lista. */
  --z-base: 0;
  --z-raised: 10;
  --z-menu: 40;
  --z-header: 50;
  --z-grain: 60;
  /* Acima do header e do grão, abaixo do loader: o aviso de envio
     precisa vencer a página inteira, mas a entrada da home ainda passa
     por cima dele. */
  --z-toast: 90;
  --z-loader: 100;
}

/* Tema claro aplicado por cena, nunca por seção solta.
   O site tem um tema por vez; a inversão da cena 4 é uma transição
   coreografada, não uma alternância decorativa. */
[data-theme="light"] {
  --bg: var(--c-offwhite);
  --fg: var(--c-black);
  --fg-muted: var(--c-gray-on-light);
  --line: var(--c-line-light);
  --fg-invert: var(--c-white);
  --bg-invert: var(--c-black);
}