/* Maxxi Brand System · escala óptica (Bloco 4) */
:root{
  /* 4.1 opacidade */
  --opacity-8:8%; --opacity-16:16%; --opacity-32:32%; --opacity-48:48%; --opacity-64:64%; --opacity-80:80%;

  /* 4.2 desfoque */
  --blur-0:0px; --blur-4:4px; --blur-8:8px; --blur-16:16px; --blur-24:24px;
  --blur-32:32px; --blur-40:40px; --blur-48:48px; --blur-64:64px;

  /* 4.3 sombra — componentes por referência (X | Y | blur | spread | cor | opacidade).
     Os três degraus são REDECLARADOS em cada escopo de tema (colors_and_type.css)
     para que o --color-shadow do tema participe da substituição; aqui ficam o
     padrão e a cor de fallback do escopo raiz. */
  --color-shadow:color-mix(in srgb, var(--color-neutral-500) var(--opacity-32), transparent);
  --shadow-sm:0 var(--space-4) var(--blur-8) 0 var(--color-shadow);
  --shadow-md:0 var(--space-8) var(--blur-16) 0 var(--color-shadow);
  --shadow-lg:0 var(--space-12) var(--blur-32) 0 var(--color-shadow);

  /* 4.4 brilho — DEFINIDO, DESATIVADO para a marca Maxxi: não aplicar em
     componente, tema, card ou preview. Cor = acento contextual.
     Nota: a opacidade 85% está fora da escala de Opacidade (4.1), assim mesmo no pacote. */
  /* DESATIVADO — não aplicar */
  --glow-opacity:85%;
  --glow-sm:0 0 var(--blur-8) 0 color-mix(in srgb, currentColor var(--glow-opacity), transparent); /* @kind shadow */
  --glow-md:0 0 var(--blur-16) 0 color-mix(in srgb, currentColor var(--glow-opacity), transparent); /* @kind shadow */
  --glow-lg:0 0 var(--blur-32) 0 color-mix(in srgb, currentColor var(--glow-opacity), transparent); /* @kind shadow */

  /* 4.5 gradiente — RÉGUA GENÉRICA: direções permitidas 0°, 45°, 90°, 225° + radial.
     A régua não define cor: a composição são duas referências cromáticas do Tema
     (--color-gradient-1 / --color-gradient-2), sem stops fixos.
     Os pares CONHECIDOS por Tema estão em colors_and_type.css — não são pendência:
     Claro {neutral.0}→{neutral.200} · Secundário {blue.900}→{neutral.950} ·
     Primário {orange.500}→{coral.600}.
     Distinto disto é a RECEITA de fundo/capa de um Tema (--gradient-cover), que é
     uma aplicação nomeada e pode ter geometria própria.
     Histórico: o ângulo 230° do Playground foi SUPERADO por 225°, escolhido para
     manter simetria com os demais. Não é definição vigente. */
  --gradient-angle:225deg; /* @kind other */
  --gradient-linear:linear-gradient(var(--gradient-angle), var(--color-gradient-1), var(--color-gradient-2)); /* @kind other */
  --gradient-radial:radial-gradient(circle, var(--color-gradient-1), var(--color-gradient-2)); /* @kind other */
}