/* Tokens de componente — Vozara Design System.
 *
 * Os componentes React do dump (Claude Design) carregavam dezenas de valores crus em
 * `style={{...}}`: paddings em px, rgba de tint, tamanhos de controle. No port para
 * PHP + CSS eles viraram tokens aqui, para que NENHUM arquivo fora de tokens/ tenha
 * cor, px ou fonte hardcoded (regra checada por bin/lint_design_system.php).
 *
 * Todo valor abaixo é o MESMO número do componente original — a tabela de
 * procedência fica no README da biblioteca (design-system/README.md § Tokens).
 * Não é paleta nova: tints são as seis cores da marca com alfa.
 */
:root{
  /* ── Breakpoint ───────────────────────────────────────────────────────
     Media query não lê custom property: este token DOCUMENTA o valor que css/navigation.css
     e css/brand.css escrevem em em (47.5em = 760px, o corte do UI kit: window.innerWidth < 760).
     O JS lê o mesmo 760 em window.innerWidth para trocar a densidade do WaveField. */
  --vz-bp-mobile:760px;
  --vz-bp-nav:960px;      /* NavBar vira menu (css/navigation.css escreve 60em) */

  /* ── Opacidades de estado ─────────────────────────────────────────────── */
  --vz-opacity-disabled:.38;        /* Button disabled */
  --vz-opacity-disabled-soft:.45;   /* controles de formulário disabled */
  --vz-opacity-dismiss:.7;          /* × do Tag */

  /* ── Tamanhos de controle (px do original) ───────────────────────────── */
  --vz-size-2xs:5px;    /* ponto ativo da NavBar */
  --vz-size-xs:6px;     /* ponto do Badge */
  --vz-size-sm:10px;    /* miolo do Radio */
  --vz-size-md:13px;    /* ícone do Badge / check */
  --vz-size-icon-sm:16px;
  --vz-size-icon-md:18px;
  --vz-size-icon:20px;
  --vz-size-icon-lg:22px;
  --vz-size-icon-xl:26px;
  --vz-size-control:20px;   /* Checkbox / Radio */
  --vz-size-thumb:18px;     /* bolinha do Switch */
  --vz-size-switch-w:44px;
  --vz-size-switch-h:26px;
  --vz-size-switch-pad:3px;
  --vz-size-iconbtn-sm:32px;
  --vz-size-iconbtn-md:40px;
  --vz-size-iconbtn-lg:48px;
  --vz-size-social:36px;
  --vz-size-avatar:52px;
  --vz-size-spinner:1em;

  /* ── Espaçamentos finos que não caem na escala de 4 ─────────────────── */
  --vz-gap-2xs:2px;
  --vz-gap-xs:6px;
  --vz-gap-sm:8px;
  --vz-gap-md:10px;
  --vz-gap-lg:12px;
  --vz-pad-badge:5px 12px;
  --vz-pad-tag:8px 14px;
  --vz-pad-tooltip:6px 10px;
  --vz-pad-input:13px 16px;
  --vz-pad-tab:9px 18px;
  --vz-pad-tab-underline:0 0 12px;
  --vz-pad-pill:9px 18px;
  --vz-pad-pill-action:5px 5px 5px 18px;
  --vz-pad-pill-action-rev:5px 18px 5px 5px;
  --vz-pad-nav-link:4px 0;
  --vz-pad-btn-sm:9px 18px;
  --vz-pad-btn-md:13px 26px;
  --vz-pad-btn-lg:17px 34px;
  --vz-btn-cta-lg:1.1875rem;   /* 19px: CTA coral lg em negrito = "texto grande" WCAG (3:1 basta) */
  --vz-pad-cta:clamp(2rem,5vw,4.5rem);
  --vz-indent-input-icon:44px;   /* padding-left do Input com ícone / padding-right do Select */
  --vz-offset-input-icon:15px;   /* posição do ícone dentro do Input/Select */
  --vz-indent-accordion:44px;    /* recuo da resposta sob o índice (01) */
  --vz-offset-tooltip:8px;
  --vz-offset-nav-dot:-6px;
  --vz-float-rise:-7px;          /* keyframe vz-float */

  /* ── Tipografia fina ─────────────────────────────────────────────────── */
  --vz-leading-control:1.1;      /* Button */
  --vz-leading-badge:1.2;
  --vz-leading-tooltip:1.3;
  --vz-leading-input:1.4;
  --vz-tracking-button:-.005em;

  /* ── Medidas de texto ────────────────────────────────────────────────── */
  --vz-measure-heading:22ch;
  --vz-measure-hero:20ch;
  --vz-measure-note:34ch;
  --vz-measure-brief:38ch;
  --vz-measure-quote:46ch;
  --vz-measure-lead:52ch;

  /* ── Larguras ────────────────────────────────────────────────────────── */
  --vz-width-dialog:520px;
  --vz-width-toast:380px;
  --vz-footer-brand-min:220px;
  --vz-footer-logo-filter:brightness(0) invert(1); /* logo monocromático claro no rodapé escuro */
  --vz-footer-col-min:150px;
  --vz-grid-min-sm:240px;
  --vz-grid-min-md:260px;
  --vz-grid-min-lg:280px;
  --vz-grid-min-xl:300px;
  --vz-grid-min-2xl:320px;
  --vz-cta-heading-basis:420px;

  /* ── Logo (alturas mínimas do Logo.prompt.md) ───────────────────────── */
  --vz-logo-nav:44px;
  --vz-logo-footer:86px;
  --vz-logo-icon:32px;
  --vz-logo-ratio-horizontal:4.25;
  --vz-logo-ratio-tagline:2.33;

  /* ── Tints (seis cores da marca com alfa) ────────────────────────────── */
  --vz-tint-teal-20:rgba(31,133,112,.20);
  --vz-tint-coral-18:rgba(217,111,76,.18);
  --vz-tint-coral-32:rgba(217,111,76,.32);
  --vz-tint-amber-18:rgba(201,138,46,.18);
  --vz-tint-amber-34:rgba(201,138,46,.34);
  --vz-tint-error-18:rgba(179,64,46,.18);
  --vz-tint-error-34:rgba(179,64,46,.34);
  --vz-tint-mint-18:rgba(168,216,201,.18);
  --vz-tint-mint-22:rgba(168,216,201,.22);
  --vz-tint-mint-26:rgba(168,216,201,.26);
  --vz-tint-mint-05:rgba(168,216,201,.05);
  --vz-tint-mint-015:rgba(168,216,201,.015);
  --vz-tint-petrol-28:rgba(14,90,74,.28);
  --vz-tint-petrol-05:rgba(14,90,74,.05);
  --vz-tint-petrol-02:rgba(14,90,74,.02);

  /* ── Texto sobre tint (legibilidade dos Badges) ─────────────────────── */
  --vz-on-tint-coral:var(--interactive-hover-soft);  /* #F0B49B no original */
  --vz-on-tint-amber:#E8BE7C;
  --vz-on-tint-error:#E8A091;
  --vz-white:#FFFFFF;                                 /* hover do IconButton light */

  /* ── Superfícies compostas ───────────────────────────────────────────── */
  --vz-scrim:rgba(2,4,3,.72);
  --vz-blur-scrim:6px;
  --vz-navbar-bg:rgba(5,8,7,.72);
  --vz-cta-gradient:linear-gradient(140deg, var(--vz-petrol) 0%, var(--vz-petrol-deep) 62%, var(--vz-petrol-950) 100%);
  --vz-portrait-gradient:linear-gradient(180deg, var(--vz-ink-3), var(--vz-petrol-950));
  --vz-photo-stripes:repeating-linear-gradient(135deg, var(--vz-tint-mint-05) 0 8px, var(--vz-tint-mint-015) 8px 16px);
  --vz-photo-stripes-light:repeating-linear-gradient(135deg, var(--vz-tint-petrol-05) 0 8px, var(--vz-tint-petrol-02) 8px 16px);

  /* ── Motivos da marca (WaveField, Spotlight, hero) ──────────────────── */
  --vz-spotlight:rgba(47,169,141,.20);
  --vz-spotlight-size:620px;
  --vz-wave-accent:#E58164;                 /* nó coral que "acende" */
  --vz-wave-accent-halo:rgba(217,111,76,.34);
  --vz-wave-accent-halo-0:rgba(217,111,76,0);
  --vz-wave-glow:rgba(47,169,141,.16);
  --vz-wave-glow-0:rgba(47,169,141,0);
  --vz-wave-fade:radial-gradient(120% 120% at 50% 108%, rgba(5,8,7,0) 42%, rgba(5,8,7,.34) 74%, rgba(5,8,7,.9) 100%), linear-gradient(180deg, var(--vz-ink) 0%, rgba(5,8,7,.35) 7%, rgba(5,8,7,0) 20%);
  --vz-hero-scrim:linear-gradient(104deg, rgba(5,8,7,.94) 0%, rgba(5,8,7,.74) 36%, rgba(5,8,7,0) 66%);
  --vz-section-scrim:linear-gradient(180deg, var(--vz-ink) 18%, rgba(5,8,7,.72) 62%, rgba(5,8,7,0) 100%);
  --vz-spin-duration:700ms;
  --vz-float-duration:6s;
  --vz-pulse-duration:2.6s;
  --vz-text-reveal-duration:900ms;
  --vz-text-reveal-fade:700ms;
  --vz-spotlight-drift:1.2s;
  --vz-rotate-hover:90deg;

  /* ── DeviceFrame / ChatMockup / CycleDiagram (acréscimos de 2026-09-28) ── */
  --vz-device-phone-w:22rem;          /* largura do celular (≈ 352 px) */
  --vz-device-phone-h:38rem;          /* altura FIXA da tela do celular (≈ proporção de um aparelho real) */
  --vz-device-bezel:var(--vz-ink-3);
  --vz-device-edge:var(--vz-tint-mint-18);
  --vz-device-dot:9px;                /* luzes da barra do notebook */
  --vz-device-notch-w:5.5rem;
  --vz-device-notch-h:6px;
  --vz-chat-bubble-max:85%;
  --vz-chat-typing-dot:6px;
  --vz-cycle-node:3.5rem;             /* círculo do nó do diagrama */
  --vz-chat-step:900ms;               /* intervalo entre mensagens na animação */
}