/*
  Wortic macOS UI Kit — Design Tokens
  Fonte da verdade para todos os valores atômicos do sistema.
  Nenhum componente deve declarar um valor "mágico" fora daqui.
*/

@layer tokens {
  :root {
    /* ============================================================
       BRAND — extraído dos arquivos de logo oficiais (wordmark.svg,
       head.svg, ring.svg, pattern.svg). Confirmado em 4 arquivos
       independentes: cyan, azul, azul-violeta e índigo profundo.
       ============================================================ */
    --wm-brand-cyan: #2ac2f3;
    /* azul claro do logo (hue 204°) — grafico, ilustracao e gradiente.
       NUNCA receber texto branco em cima (3.49:1); com preto da 6.03:1. */
    --wm-brand-blue-light: #198fde;
    --wm-brand-blue: #0049ff;
    --wm-brand-blue-violet: #020bb5;
    --wm-brand-indigo: #0a008e;
    --wm-brand-black: #000000;
    --wm-brand-white: #ffffff;

    /* ============================================================
       SPACING — escala base 4px
       ============================================================ */
    --wm-space-0: 0;
    --wm-space-1: 2px;
    --wm-space-2: 4px;
    --wm-space-3: 6px;
    --wm-space-4: 8px;
    --wm-space-5: 10px;
    --wm-space-6: 12px;
    --wm-space-7: 14px;
    --wm-space-8: 16px;
    --wm-space-9: 20px;
    --wm-space-10: 24px;
    --wm-space-11: 32px;
    --wm-space-12: 40px;
    --wm-space-13: 48px;
    --wm-space-14: 64px;

    /* ============================================================
       RADIUS
       ============================================================ */
    --wm-radius-xs: 4px;
    --wm-radius-sm: 6px;
    --wm-radius-md: 8px;
    --wm-radius-lg: 10px;
    --wm-radius-xl: 14px;
    --wm-radius-2xl: 18px;
    --wm-radius-pill: 999px;
    --wm-radius-hairline: 1px;

    /* Liquid Glass (macOS 2026): janelas e painéis flutuantes usam
       cantos bem mais generosos que cards de conteúdo comum. */
    --wm-radius-window: 22px;
    --wm-radius-window-xl: 26px;
    --wm-radius-panel: 16px;
    --wm-radius-sheet-top: 16px;

    /* Radius de agrupamentos de conteúdo (inset groups à la Settings) */
    --wm-radius-list-group: 12px;
    --wm-radius-settings-group: 12px;
    --wm-radius-settings-icon: 7px;

    /* ============================================================
       CONTROL HEIGHTS
       ============================================================ */
    --wm-control-height-xs: 20px;
    --wm-control-height-sm: 24px;
    --wm-control-height-md: 28px;
    --wm-control-height-lg: 34px;
    --wm-control-height-xl: 40px;
    /* Controles "hero" (botões com imagem de capa, tiles clicáveis) */
    --wm-control-height-2xl: 48px;
    --wm-control-height-3xl: 64px;

    /* ============================================================
       FAB — botão de ação flutuante
       ============================================================ */
    --wm-fab-size: 48px;
    --wm-fab-size-mini: 36px;
    /* distância do centro do FAB até o centro dos itens do menu radial */
    --wm-fab-menu-radius: 76px;

    /* ============================================================
       ICON SIZES
       ============================================================ */
    --wm-icon-xs: 12px;
    --wm-icon-sm: 14px;
    --wm-icon-md: 16px;
    --wm-icon-lg: 20px;
    --wm-icon-xl: 24px;

    /* ============================================================
       TIPOGRAFIA
       ============================================================ */
    --wm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
      "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
    --wm-font-family-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code",
      Consolas, monospace;

    /* Tamanhos: tabela oficial HIG > Typography > macOS.
       Nao invente valores aqui — cada um tem leading e tracking pareados. */
    --wm-font-size-caption2: 10px;
    --wm-font-size-caption: 10px;
    --wm-font-size-footnote: 10px;
    --wm-font-size-subheadline: 11px;
    --wm-font-size-callout: 12px;
    --wm-font-size-body: 13px;
    --wm-font-size-headline: 13px;
    --wm-font-size-title3: 15px;
    --wm-font-size-title2: 17px;
    --wm-font-size-title1: 22px;
    --wm-font-size-large-title: 26px;

    /* Leading ABSOLUTO (a Apple publica leading, nao multiplicador) */
    --wm-leading-caption2: 13px;
    --wm-leading-caption: 13px;
    --wm-leading-footnote: 13px;
    --wm-leading-subheadline: 14px;
    --wm-leading-callout: 15px;
    --wm-leading-body: 16px;
    --wm-leading-headline: 16px;
    --wm-leading-title3: 20px;
    --wm-leading-title2: 22px;
    --wm-leading-title1: 26px;
    --wm-leading-large-title: 32px;

    /* Tracking por TAMANHO, conforme a tabela de tracking do SF.
       Repare que a partir de ~23pt a Apple volta a ABRIR o espacamento. */
    --wm-tracking-caption2: 0.12px;
    --wm-tracking-caption: 0.12px;
    --wm-tracking-footnote: 0.12px;
    --wm-tracking-subheadline: 0.06px;
    --wm-tracking-callout: 0px;
    --wm-tracking-body: -0.08px;
    --wm-tracking-headline: -0.08px;
    --wm-tracking-title3: -0.23px;
    --wm-tracking-title2: -0.43px;
    --wm-tracking-title1: -0.26px;
    --wm-tracking-large-title: 0.22px;

    --wm-line-height-tight: 1.15;
    --wm-line-height-normal: 1.35;
    --wm-line-height-relaxed: 1.5;

    --wm-font-weight-regular: 400;
    --wm-font-weight-medium: 500;
    --wm-font-weight-semibold: 590;
    --wm-font-weight-bold: 700;

    --wm-letter-spacing-tighter: -0.02em;
    --wm-letter-spacing-tight: -0.01em;
    --wm-letter-spacing-normal: 0;
    --wm-letter-spacing-wide: 0.02em;

    /* ============================================================
       MOTION
       ============================================================ */
    --wm-duration-instant: 60ms;
    --wm-duration-fast: 120ms;
    --wm-duration-normal: 180ms;
    --wm-duration-slow: 260ms;
    /* Ambient: animações decorativas contínuas (gradiente animado, sheen).
       NUNCA para transição de interação — só para vida de fundo. */
    --wm-duration-ambient: 2.8s;
    --wm-duration-ambient-slow: 7s;
    /* Uma volta completa de spinner indeterminado */
    --wm-duration-spinner: 700ms;

    --wm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --wm-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --wm-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
    --wm-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

    --wm-scale-pressed: 0.985;
    --wm-scale-pressed-sm: 0.97;
    --wm-scale-hover-raise: -1px;

    /* ============================================================
       ELEVATION (z-index scale)
       ============================================================ */
    --wm-z-base: 0;
    --wm-z-sticky: 100;
    --wm-z-toolbar: 200;
    --wm-z-sidebar: 300;
    --wm-z-popover: 400;
    --wm-z-dropdown: 410;
    --wm-z-sheet: 500;
    --wm-z-modal: 600;
    --wm-z-toast: 700;
    --wm-z-tooltip: 800;

    /* ============================================================
       BORDER WIDTH
       ============================================================ */
    --wm-border-width-hairline: 0.5px;
    --wm-border-width-thin: 1px;
    --wm-border-width-thick: 2px;

    /* ============================================================
       FOCUS RING — anel duplo: traço de accent + halo suave
       ============================================================ */
    --wm-focus-ring-width: 2px;
    --wm-focus-ring-offset: 1px;
    --wm-focus-halo-width: 4px;

    /* ============================================================
       NAVEGAÇÃO — nav-bottom, nav-header, nav-sidebar, nav-floating
       ============================================================ */
    --wm-nav-bottom-height: 56px;
    --wm-nav-header-height: 52px;
    --wm-nav-header-height-compact: 40px;
    --wm-nav-action-size: 48px;
    --wm-nav-sidebar-width: 248px;
    --wm-nav-sidebar-width-collapsed: 64px;
    --wm-nav-floating-height: 48px;
    --wm-nav-dock-icon: 44px;
    --wm-nav-search-width: 320px;
    --wm-nav-submenu-min-width: 236px;
    --wm-menu-context-min-width: 220px;
    --wm-breadcrumb-truncate-width: 160px;

    /* ============================================================
       LOADING & AMBIENT EFFECTS (componentes de carregamento)
       Tamanhos de indicador, espessuras de traço e durações de ciclo
       contínuo — as durações --wm-duration-* de cima são transições
       de interação; ciclos de loading são mais longos por natureza.
       ============================================================ */
    --wm-loading-size-sm: 16px;
    --wm-loading-size-md: 24px;
    --wm-loading-size-lg: 32px;
    --wm-loading-stroke-sm: 2px;
    --wm-loading-stroke-md: 2.5px;
    --wm-loading-stroke-lg: 3px;
    --wm-loading-ring-size-sm: 48px;
    --wm-loading-ring-size-md: 72px;
    --wm-loading-ring-size-lg: 112px;
    --wm-loading-bar-height: 6px;
    --wm-loading-bar-height-thin: 3px;

    --wm-duration-loading-spin: 900ms;
    --wm-duration-loading-shimmer: 1600ms;
    --wm-duration-loading-pulse: 1400ms;
    /* Deriva de FUNDO (background-effects): ciclos longos de paisagem,
       diferentes do --wm-duration-ambient (sheen curto) definido acima. */
    --wm-duration-bg-drift: 14s;
    --wm-duration-bg-drift-slow: 26s;
    --wm-duration-toast: 5000ms;

    /* Skeleton — geometria dos blocos de esqueleto de conteúdo */
    --wm-skeleton-line-height: 10px;
    --wm-skeleton-title-height: 14px;
    --wm-skeleton-avatar-size: 36px;
    --wm-skeleton-avatar-size-lg: 48px;
    --wm-skeleton-media-height: 120px;

    /* ============================================================
       BUSCA & ROTULAGEM — larguras/medidas dos componentes de busca,
       filtros, chips, badges e folha de ícones (frente busca).
       ============================================================ */
    --wm-search-bar-max-width: 280px;
    --wm-search-suggest-max-height: 260px;
    --wm-search-lightbox-width: 680px;
    --wm-search-lightbox-list-height: 380px;
    --wm-search-lightbox-preview-width: 240px;
    --wm-filters-menu-width: 240px;
    --wm-badge-height: 18px;
    --wm-badge-dot-size: 6px;
    --wm-chip-avatar-size: 18px;
    --wm-chip-remove-size: 16px;
    --wm-icon-sheet-cell: 84px;
    --wm-tags-suggest-max-height: 220px;

    /* ============================================================
       LAYOUT & MÍDIA — grids fluidos, carrossel, slides e imagem
       (frente layout: grids, slides, carousel, gallery, images,
       article, product)
       ============================================================ */
    --wm-grid-min-col-sm: 160px;
    --wm-grid-min-col: 220px;
    --wm-grid-min-col-lg: 280px;
    --wm-grid-row-unit: 120px;
    --wm-carousel-item-w: 240px;
    --wm-carousel-item-w-lg: 320px;
    --wm-carousel-peek: 48px;
    --wm-carousel-thumb-w: 64px;
    --wm-carousel-nav-size: 32px;
    --wm-slides-h: 340px;
    --wm-slides-indicator-size: 8px;
    --wm-lightbox-max-w: 960px;
    --wm-image-frame-pad: 6px;
    --wm-image-gradient-border: 2px;
    --wm-image-blur-up: 24px;
    --wm-product-media-h: 200px;

    /* Proporções canônicas de imagem */
    --wm-ratio-square: 1;
    --wm-ratio-photo: 4 / 3;
    --wm-ratio-wide: 16 / 9;
    --wm-ratio-portrait: 3 / 4;
    --wm-ratio-panorama: 21 / 9;

    /* ============================================================
       ESTADOS DE TELA INTEIRA & AUTENTICAÇÃO
       (frente estados-auth: state-empty, state-error, state-404,
       state-offline, state-forbidden, state-loading, auth-login,
       auth-signup, auth-recover, auth-otp, auth-magic-link)
       ============================================================ */
    /* A área de estado ocupa a tela; o texto fica numa coluna estreita
       para não passar de ~65 caracteres por linha. */
    --wm-state-min-height: 380px;
    --wm-state-max-width: 420px;
    --wm-state-max-width-wide: 520px;
    --wm-state-figure-size: 64px;
    --wm-state-figure-size-lg: 88px;
    --wm-state-glyph-size: 26px;
    --wm-state-glyph-size-lg: 36px;
    /* O numeral gigante do 404 — display, fora da escala de texto */
    --wm-state-code-size: 56px;
    --wm-state-code-leading: 58px;
    /* Altura máxima do <pre> dentro do <details> de erro */
    --wm-state-detail-max-height: 180px;
    /* Faixa fina de estado (offline em banner) */
    --wm-state-banner-height: 36px;
    /* Halo desfocado atrás do numeral do 404 ilustrado */
    --wm-state-halo-blur: 28px;

    --wm-auth-card-width: 380px;
    --wm-auth-card-width-wide: 440px;
    --wm-auth-mark-size: 44px;
    --wm-auth-provider-icon: 18px;
    --wm-auth-strength-height: 4px;
    --wm-otp-cell-width: 46px;
    --wm-otp-cell-height: 56px;
    /* Contagem regressiva de reenvio / repetição automática */
    --wm-duration-countdown-tick: 1000ms;

    /* ============================================================
       IA — a categoria de interface generativa (frente ai):
       ai-stream, ai-thinking, ai-toolcall, ai-citation,
       ai-prompt-suggest, ai-feedback, ai-diff, ai-agent-status.
       Geometria e ritmo próprios: o tempo da IA não é o tempo de
       uma transição de controle — token que chega, raciocínio que
       pulsa e ferramenta que roda vivem em ciclos mais longos.
       ============================================================ */
    /* Cursor de digitação (caret vivo no fim do texto em streaming) */
    --wm-ai-cursor-width: 2px;
    --wm-ai-cursor-height: var(--wm-leading-body);
    --wm-ai-cursor-radius: 1px;

    /* Ciclos de vida da IA — SEMPRE mais longos que --wm-duration-*,
       que são transições de interação. Estes são batimentos. */
    --wm-duration-ai-caret: 1060ms;
    --wm-duration-ai-token: 220ms;
    --wm-duration-ai-think: 1500ms;
    --wm-duration-ai-shimmer: 2400ms;
    --wm-duration-ai-sweep: 3200ms;

    /* Texto gerado: medida de leitura e reserva de altura.
       A reserva existe para o parágrafo parcial NÃO empurrar o
       layout a cada token que chega. */
    --wm-ai-measure: 68ch;
    --wm-ai-stream-min-height: 72px;
    --wm-ai-block-padding: var(--wm-space-7);

    /* Faixa lateral que marca "isto foi gerado por IA" */
    --wm-ai-strip-width: 3px;

    /* Avatar/glifo do agente */
    --wm-ai-glyph-size: 22px;
    --wm-ai-avatar-size: 28px;
    --wm-ai-avatar-size-lg: 36px;

    /* Pontinhos do estado "pensando" */
    --wm-ai-dot-size: 5px;
    --wm-ai-dot-gap: var(--wm-space-2);

    /* Raciocínio, ferramenta e fila: alturas máximas dos corpos
       recolhíveis (rolam por dentro em vez de esticar a conversa) */
    --wm-ai-thinking-max-height: 220px;
    --wm-ai-toolcall-output-max-height: 240px;
    --wm-ai-queue-max-height: 196px;
    --wm-ai-diff-max-height: 340px;

    /* Citação */
    --wm-ai-cite-marker-size: 16px;
    --wm-ai-cite-marker-size-sm: 14px;
    --wm-ai-cite-card-width: 288px;
    --wm-ai-cite-favicon-size: 16px;

    /* Sugestões de prompt */
    --wm-ai-suggest-card-min: 208px;
    --wm-ai-suggest-card-min-height: 84px;

    /* Diff */
    --wm-ai-diff-gutter-width: 40px;
    --wm-ai-diff-mark-width: 14px;
    --wm-ai-diff-line-height: 19px;

    /* Painel de agente */
    --wm-ai-panel-width: 340px;
    --wm-ai-progress-height: 4px;
    --wm-ai-progress-height-lg: 6px;

    /* ============================================================
       AGENTIC — o fluxo em etapas que acontece COMO SE FOSSE UM CHAT
       (agentic-flow, agentic-turn, agentic-summary, agentic-handoff).
       Geometria própria porque aqui convivem duas leituras ao mesmo
       tempo: a TRILHA (onde estou de tudo) e a CONVERSA (o que está
       sendo perguntado agora). A trilha precisa de largura fixa para
       não dançar quando um valor longo entra no resumo da etapa.
       ============================================================ */
    --wm-agentic-track-width: 216px;
    --wm-agentic-track-width-wide: 248px;
    /* Bolinha da etapa na trilha + o trilho que liga uma à outra. */
    --wm-agentic-marker-size: 20px;
    --wm-agentic-marker-size-sm: 14px;
    --wm-agentic-rail-width: 2px;
    /* Recuo do texto da etapa: marcador + respiro, para os rótulos
       alinharem numa coluna só, com ou sem valor embaixo. */
    --wm-agentic-track-indent: calc(
      var(--wm-agentic-marker-size) + var(--wm-space-6)
    );

    /* Conversa */
    --wm-agentic-measure: 62ch;
    --wm-agentic-avatar-size: var(--wm-ai-avatar-size);
    --wm-agentic-bubble-radius: var(--wm-radius-xl);
    --wm-agentic-turn-gap: var(--wm-space-8);
    /* Altura reservada do turno atual: a chegada da pergunta não pode
       empurrar o campo de resposta para fora da vista. */
    --wm-agentic-turn-min-height: 64px;
    --wm-agentic-thread-max-height: 460px;

    /* Resumo do que já foi coletado */
    --wm-agentic-summary-width: 264px;
    --wm-agentic-summary-label-width: 92px;

    /* Passagem de bastão (permissão, arquivo, humano) */
    --wm-agentic-handoff-icon-size: 28px;
    --wm-agentic-handoff-strip-width: 3px;

    /* Breakpoints canônicos — FONTE DA VERDADE dos @media/@container
       do kit. CSS não aceita var() dentro da condição de @media nem de
       @container; quem usar espelha o VALOR e comenta o token ao lado:
       @media (max-width: 680px) [--wm-bp-md]. Mudou aqui, muda lá. */
    --wm-bp-xs: 420px;
    --wm-bp-sm: 560px;
    --wm-bp-md: 680px;
    --wm-bp-lg: 900px;
    --wm-bp-xl: 940px;

    /* ============================================================
       GRADE — a régua horizontal. O breakpoint diz ONDE quebra;
       estes tokens dizem PARA O QUÊ. Ficha: foundation/docs/grade.json
       ============================================================ */
    --wm-grid-columns-xs: 4;
    --wm-grid-columns-sm: 6;
    --wm-grid-columns-md: 8;
    --wm-grid-columns-lg: 12;
    --wm-grid-columns-xl: 12;

    --wm-grid-gutter-xs: var(--wm-space-6);   /* 12px */
    --wm-grid-gutter-sm: var(--wm-space-8);   /* 16px */
    --wm-grid-gutter-md: var(--wm-space-8);   /* 16px */
    --wm-grid-gutter-lg: var(--wm-space-9);   /* 20px */
    --wm-grid-gutter-xl: var(--wm-space-9);   /* 20px */

    --wm-grid-margin-xs: var(--wm-space-8);   /* 16px */
    --wm-grid-margin-sm: var(--wm-space-9);   /* 20px */
    --wm-grid-margin-md: var(--wm-space-10);  /* 24px */
    --wm-grid-margin-lg: var(--wm-space-11);  /* 32px */
    --wm-grid-margin-xl: var(--wm-space-11);  /* 32px */

    --wm-container-sm: 560px;
    --wm-container-md: 640px;
    --wm-container-lg: 860px;
    --wm-container-xl: 1040px;
    --wm-container-prose: 68ch;

    /* Valores CORRENTES da grade. Os @media abaixo trocam por faixa;
       componente e layout leem SOMENTE estes quatro. */
    --wm-grid-columns: var(--wm-grid-columns-xs);
    --wm-grid-gutter: var(--wm-grid-gutter-xs);
    --wm-grid-margin: var(--wm-grid-margin-xs);
    --wm-container: 100%;

    /* ============================================================
       DENSIDADE — compacto / normal / confortável.
       Cada modo é um CONJUNTO fechado (altura + fonte + leading +
       ícone + raio + padding + gap + linha). Componente lê os
       CORRENTES; quem troca de modo é [data-wm-density] no ancestral.
       Ficha: foundation/docs/densidade.json
       ============================================================ */
    --wm-density-compact-height: var(--wm-control-height-sm);      /* 24px */
    --wm-density-compact-font: var(--wm-font-size-subheadline);    /* 11px */
    --wm-density-compact-leading: var(--wm-leading-subheadline);   /* 14px */
    --wm-density-compact-icon: var(--wm-icon-sm);                  /* 14px */
    --wm-density-compact-radius: var(--wm-radius-xs);              /* 4px  */
    --wm-density-compact-pad: var(--wm-space-4);                   /* 8px  */
    --wm-density-compact-gap: var(--wm-space-2);                   /* 4px  */
    --wm-density-compact-row: var(--wm-control-height-sm);         /* 24px */

    --wm-density-normal-height: var(--wm-control-height-md);       /* 28px */
    --wm-density-normal-font: var(--wm-font-size-body);            /* 13px */
    --wm-density-normal-leading: var(--wm-leading-body);           /* 16px */
    --wm-density-normal-icon: var(--wm-icon-md);                   /* 16px */
    --wm-density-normal-radius: var(--wm-radius-md);               /* 8px  */
    --wm-density-normal-pad: var(--wm-space-6);                    /* 12px */
    --wm-density-normal-gap: var(--wm-space-3);                    /* 6px  */
    --wm-density-normal-row: var(--wm-space-11);                   /* 32px */

    --wm-density-comfortable-height: var(--wm-control-height-lg);  /* 34px */
    --wm-density-comfortable-font: var(--wm-font-size-body);       /* 13px */
    --wm-density-comfortable-leading: var(--wm-leading-body);      /* 16px */
    --wm-density-comfortable-icon: var(--wm-icon-lg);              /* 20px */
    --wm-density-comfortable-radius: var(--wm-radius-lg);          /* 10px */
    --wm-density-comfortable-pad: var(--wm-space-8);               /* 16px */
    --wm-density-comfortable-gap: var(--wm-space-4);               /* 8px  */
    --wm-density-comfortable-row: var(--wm-control-height-xl);     /* 40px */

    --wm-density-height: var(--wm-density-normal-height);
    --wm-density-font: var(--wm-density-normal-font);
    --wm-density-leading: var(--wm-density-normal-leading);
    --wm-density-icon: var(--wm-density-normal-icon);
    --wm-density-radius: var(--wm-density-normal-radius);
    --wm-density-pad: var(--wm-density-normal-pad);
    --wm-density-gap: var(--wm-density-normal-gap);
    --wm-density-row: var(--wm-density-normal-row);

    /* ============================================================
       MOVIMENTO — o par entrada/saída.
       Regra do kit: o que SAI é mais rápido do que o que ENTRA e usa
       curva neutra — coisa que some não precisa ser apresentada.
       Ficha: foundation/docs/movimento.json
       ============================================================ */
    --wm-duration-enter: var(--wm-duration-normal);   /* 180ms */
    --wm-duration-exit: var(--wm-duration-fast);      /* 120ms */
    --wm-ease-enter: var(--wm-ease-emphasized);
    --wm-ease-exit: var(--wm-ease-standard);
    --wm-motion-offset-sm: var(--wm-space-2);         /* 4px  — tooltip, saída */
    --wm-motion-offset-md: var(--wm-space-4);         /* 8px  — toast, popover */
    --wm-motion-offset-lg: var(--wm-space-8);         /* 16px — sheet */
    --wm-motion-scale-enter: 0.96;
    --wm-motion-scale-exit: 0.98;

    /* ============================================================
       ICONOGRAFIA — a grade do símbolo.
       Números SEM unidade (grid/live-area/keyline/stroke) porque vivem
       dentro do viewBox do SVG, não em px de tela.
       Ficha: foundation/docs/iconografia.json
       ============================================================ */
    --wm-icon-grid: 24;              /* viewBox de todo símbolo do kit */
    --wm-icon-live-area: 20;         /* área útil: o desenho não sai daqui */
    --wm-icon-keyline-pad: 2;        /* respiro em cada borda do viewBox */
    --wm-icon-stroke: 2;             /* espessura padrão no viewBox de 24 */
    --wm-icon-stroke-bold: 2.5;      /* ícone que precisa de peso (estado ativo) */
    --wm-icon-2xl: 32px;             /* glifo de estado vazio */
    --wm-icon-3xl: 48px;             /* glifo hero / marca de app */
    --wm-icon-optical-nudge: 0.5px;  /* correção de ícone com massa de um lado só */

    /* Camadas que faltavam na escala de z-index */
    --wm-z-below: -1;                /* decoração ATRÁS do conteúdo do próprio bloco */
    --wm-z-fab: 250;                 /* botão flutuante: acima da toolbar, abaixo da sidebar */
    --wm-z-overlay: 590;             /* o véu do modal — colado embaixo dele */
  }

  /* ============================================================
     GRADE por faixa — mobile-first (min-width).
     CSS não aceita var() na condição: o valor está espelhado e o
     token vai comentado ao lado. Mudou --wm-bp-*, muda aqui.
     ============================================================ */
  @media (min-width: 420px) {   /* [--wm-bp-xs] */
    :root {
      --wm-grid-columns: var(--wm-grid-columns-xs);
      --wm-grid-gutter: var(--wm-grid-gutter-xs);
      --wm-grid-margin: var(--wm-grid-margin-xs);
      --wm-container: 100%;
    }
  }
  @media (min-width: 560px) {   /* [--wm-bp-sm] */
    :root {
      --wm-grid-columns: var(--wm-grid-columns-sm);
      --wm-grid-gutter: var(--wm-grid-gutter-sm);
      --wm-grid-margin: var(--wm-grid-margin-sm);
      --wm-container: var(--wm-container-sm);
    }
  }
  @media (min-width: 680px) {   /* [--wm-bp-md] */
    :root {
      --wm-grid-columns: var(--wm-grid-columns-md);
      --wm-grid-gutter: var(--wm-grid-gutter-md);
      --wm-grid-margin: var(--wm-grid-margin-md);
      --wm-container: var(--wm-container-md);
    }
  }
  @media (min-width: 900px) {   /* [--wm-bp-lg] */
    :root {
      --wm-grid-columns: var(--wm-grid-columns-lg);
      --wm-grid-gutter: var(--wm-grid-gutter-lg);
      --wm-grid-margin: var(--wm-grid-margin-lg);
      --wm-container: var(--wm-container-lg);
    }
  }
  @media (min-width: 940px) {   /* [--wm-bp-xl] */
    :root {
      --wm-grid-columns: var(--wm-grid-columns-xl);
      --wm-grid-gutter: var(--wm-grid-gutter-xl);
      --wm-grid-margin: var(--wm-grid-margin-xl);
      --wm-container: var(--wm-container-xl);
    }
  }

  /* ============================================================
     DENSIDADE — troca o conjunto inteiro num escopo.
     Uso: <div data-wm-density="compact"> … </div>
     ============================================================ */
  [data-wm-density="compact"] {
    --wm-density-height: var(--wm-density-compact-height);
    --wm-density-font: var(--wm-density-compact-font);
    --wm-density-leading: var(--wm-density-compact-leading);
    --wm-density-icon: var(--wm-density-compact-icon);
    --wm-density-radius: var(--wm-density-compact-radius);
    --wm-density-pad: var(--wm-density-compact-pad);
    --wm-density-gap: var(--wm-density-compact-gap);
    --wm-density-row: var(--wm-density-compact-row);
  }

  [data-wm-density="normal"] {
    --wm-density-height: var(--wm-density-normal-height);
    --wm-density-font: var(--wm-density-normal-font);
    --wm-density-leading: var(--wm-density-normal-leading);
    --wm-density-icon: var(--wm-density-normal-icon);
    --wm-density-radius: var(--wm-density-normal-radius);
    --wm-density-pad: var(--wm-density-normal-pad);
    --wm-density-gap: var(--wm-density-normal-gap);
    --wm-density-row: var(--wm-density-normal-row);
  }

  [data-wm-density="comfortable"] {
    --wm-density-height: var(--wm-density-comfortable-height);
    --wm-density-font: var(--wm-density-comfortable-font);
    --wm-density-leading: var(--wm-density-comfortable-leading);
    --wm-density-icon: var(--wm-density-comfortable-icon);
    --wm-density-radius: var(--wm-density-comfortable-radius);
    --wm-density-pad: var(--wm-density-comfortable-pad);
    --wm-density-gap: var(--wm-density-comfortable-gap);
    --wm-density-row: var(--wm-density-comfortable-row);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --wm-duration-instant: 0ms;
      --wm-duration-fast: 0ms;
      --wm-duration-normal: 0ms;
      --wm-duration-slow: 0ms;
      --wm-duration-ambient: 0ms;
      --wm-duration-ambient-slow: 0ms;

      /* IA: o batimento morre, o conteúdo continua. Cada componente
         de IA também desliga a própria animação no seu @media —
         zerar aqui garante que nada "vaza" por transição herdada. */
      --wm-duration-ai-caret: 0ms;
      --wm-duration-ai-token: 0ms;
      --wm-duration-ai-think: 0ms;
      --wm-duration-ai-shimmer: 0ms;
      --wm-duration-ai-sweep: 0ms;
    }
  }
}

/*
  ============================================================
  EDITOR DE VÍDEO — geometria (frente midia-video)
  vid-timeline, vid-playhead, vid-track, vid-clip, vid-trim-handles,
  vid-transport, vid-viewer, vid-scopes, vid-color-wheels…

  A unidade que rege a timeline é ESCALA: quantos px vale 1 segundo.
  Todo posicionamento nasce dela — `left: calc(var(--wm-vid-at) *
  var(--wm-vid-scale))`, onde `--wm-vid-at` é DADO (segundos, número
  puro) e `--wm-vid-scale` é ESTILO (token abaixo). Nenhum componente
  escreve px de posição: escreve segundos.
  ============================================================
*/
@layer tokens {
  :root {
    /* Escala da timeline — px por segundo. Zoom é trocar de degrau. */
    --wm-vid-scale-xs: 2px;
    --wm-vid-scale-sm: 4px;
    --wm-vid-scale-md: 8px;
    --wm-vid-scale-lg: 18px;
    --wm-vid-scale-xl: 40px;
    /* Escala de quadro: 1 frame a 24fps ocupa ~2px na escala xl */
    --wm-vid-frame-width: 2px;

    /* Régua de tempo */
    --wm-vid-ruler-height: 26px;
    --wm-vid-ruler-height-lg: 32px;
    --wm-vid-ruler-tick-h: 5px;
    --wm-vid-ruler-tick-h-major: 10px;
    --wm-vid-ruler-tick-gap: 8px;

    /* Trilhas */
    --wm-vid-track-height-sm: 36px;
    --wm-vid-track-height: 56px;
    --wm-vid-track-height-lg: 84px;
    --wm-vid-track-height-xl: 112px;
    --wm-vid-track-gap: 2px;
    --wm-vid-track-header-width: 148px;
    --wm-vid-track-header-width-sm: 108px;
    --wm-vid-track-badge: 20px;

    /* Clipes */
    --wm-vid-clip-radius: 5px;
    --wm-vid-clip-accent-height: 3px;
    --wm-vid-clip-thumb-width: 44px;
    --wm-vid-clip-thumb-width-lg: 64px;
    --wm-vid-clip-min-width: 18px;
    --wm-vid-clip-inset: 1px;
    --wm-vid-clip-badge: 14px;

    /* Agulha (playhead) e skimmer */
    --wm-vid-playhead-width: 1px;
    --wm-vid-playhead-head-width: 13px;
    --wm-vid-playhead-head-height: 10px;
    --wm-vid-playhead-hit: 13px;

    /* Alças de trim, ripple e roll */
    --wm-vid-trim-width: 9px;
    --wm-vid-trim-width-lg: 12px;
    --wm-vid-trim-grip: 2px;
    --wm-vid-trim-grip-height: 14px;
    --wm-vid-roll-width: 14px;

    /* Marcadores, guias e seleção de intervalo */
    --wm-vid-marker-size: 11px;
    --wm-vid-marker-stem: 2px;
    --wm-vid-marker-label-max: 168px;
    --wm-vid-snap-width: 1px;
    --wm-vid-range-handle: 10px;

    /* Transporte e scrubber */
    --wm-vid-transport-height: 40px;
    --wm-vid-transport-btn: 30px;
    --wm-vid-transport-btn-lg: 38px;
    --wm-vid-scrubber-height: 5px;
    --wm-vid-scrubber-height-lg: 7px;
    --wm-vid-scrubber-thumb: 13px;
    --wm-vid-scrub-preview-w: 148px;

    /* Viewer */
    --wm-vid-viewer-max-width: 720px;
    --wm-vid-viewer-pad: var(--wm-space-4);
    --wm-vid-overlay-handle: 11px;
    --wm-vid-overlay-rotate-arm: 26px;

    /* Painéis do editor */
    --wm-vid-inspector-width: 300px;
    --wm-vid-panel-radius: var(--wm-radius-lg);
    --wm-vid-wheel-size: 108px;
    --wm-vid-wheel-size-sm: 84px;
    --wm-vid-wheel-puck: 14px;
    --wm-vid-scope-size: 168px;
    --wm-vid-keyframe-size: 9px;
    --wm-vid-curve-height: 160px;
    --wm-vid-effect-tile: 136px;
    --wm-vid-transition-width: 40px;
    --wm-vid-transition-width-lg: 56px;
    --wm-vid-timecode-width: 112px;
    --wm-vid-zoom-width: 132px;
    --wm-vid-export-width: 560px;

    /* Ritmo do editor: raspagem é quase instantânea; painel usa o
       tempo normal do kit. Nada de bounce em superfície de edição. */
    --wm-duration-editor-scrub: 90ms;
    --wm-duration-editor-snap: 120ms;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --wm-duration-editor-scrub: 0ms;
      --wm-duration-editor-snap: 0ms;
    }
  }
}

/*
  ============================================================
  EDITOR DE ÁUDIO — geometria da categoria "audio" (frente
  midia-audio: forma de onda, região, trilha, mixer, fader,
  knob, medidor, EQ, compressor, espectro, transporte).

  Um editor de áudio é uma bancada: régua, pistas de altura
  fixa, tira de mixer estreita, fader longo. Essas medidas não
  saem da escala de espaço comum — são medidas de INSTRUMENTO,
  e por isso têm família própria. Cores ficam em colors.css,
  no bloco --wm-editor-* (aliases que seguem o tema).
  ============================================================
*/
@layer tokens {
  :root {
    /* ---------- Arranjo: régua, pistas e cabeçalhos ---------- */
    --wm-aud-ruler-height: 26px;
    --wm-aud-ruler-height-lg: 34px;
    --wm-aud-track-height-sm: 44px;
    --wm-aud-track-height: 72px;
    --wm-aud-track-height-lg: 108px;
    --wm-aud-track-col-width: 208px;
    --wm-aud-track-col-width-sm: 148px;
    /* Faixa de cor que identifica a trilha (à esquerda do cabeçalho) */
    --wm-aud-track-tint-width: 4px;

    /* Grade do arranjo: divisão de compasso e subdivisão */
    --wm-aud-grid-bar: 96px;
    --wm-aud-grid-beat: 24px;

    /* ---------- Cabeça de reprodução e marcadores ---------- */
    --wm-aud-playhead-width: 1px;
    --wm-aud-playhead-head-size: 11px;
    --wm-aud-marker-height: 18px;
    --wm-aud-marker-flag-notch: 6px;

    /* ---------- Região de áudio ---------- */
    --wm-aud-clip-radius: var(--wm-radius-sm);
    --wm-aud-clip-title-height: 15px;
    --wm-aud-clip-handle-width: 9px;
    /* Alça de fade: alvo de toque no canto superior da região */
    --wm-aud-fade-handle-size: 11px;

    /* ---------- Forma de onda ---------- */
    --wm-aud-wave-height: 96px;
    --wm-aud-wave-height-sm: 48px;
    --wm-aud-wave-height-lg: 160px;
    --wm-aud-wave-zero-width: 1px;

    /* ---------- Mixer: tira, fader, knob e medidor ---------- */
    --wm-aud-strip-width: 84px;
    --wm-aud-strip-width-sm: 64px;
    --wm-aud-fader-length: 168px;
    --wm-aud-fader-length-sm: 112px;
    --wm-aud-fader-track-width: 7px;
    --wm-aud-fader-thumb-width: 30px;
    --wm-aud-fader-thumb-height: 15px;
    --wm-aud-fader-tick-length: 5px;
    --wm-aud-fader-tick-length-zero: 9px;

    --wm-aud-knob-size-sm: 30px;
    --wm-aud-knob-size: 44px;
    --wm-aud-knob-size-lg: 60px;
    --wm-aud-knob-arc-width: 3px;
    --wm-aud-knob-pointer-width: 2px;
    /* Arco do knob: varre 270°, com a "boca" virada para baixo */
    --wm-aud-knob-sweep: 270deg;
    --wm-aud-knob-gap: 45deg;

    --wm-aud-meter-width: 9px;
    --wm-aud-meter-width-sm: 5px;
    --wm-aud-meter-length: 168px;
    --wm-aud-meter-length-sm: 96px;
    --wm-aud-meter-segment: 4px;
    --wm-aud-meter-segment-gap: 1px;
    --wm-aud-meter-hold-width: 2px;
    --wm-aud-meter-clip-size: 9px;
    /* Escala do medidor em dBFS: onde trocam as faixas de cor.
       0 dBFS no topo; -6 e -1 são as fronteiras verde→âmbar→vermelho. */
    --wm-aud-meter-zone-warn: 90%;
    --wm-aud-meter-zone-clip: 98.4%;
    --wm-aud-vu-size: 96px;
    --wm-aud-vu-needle-width: 1.5px;

    /* ---------- Processamento: EQ, compressor, espectro, rack ---------- */
    --wm-aud-graph-height: 168px;
    --wm-aud-graph-height-sm: 108px;
    --wm-aud-graph-height-lg: 220px;
    --wm-aud-eq-node-size: 15px;
    --wm-aud-eq-curve-width: 2px;
    --wm-aud-spectrum-height: 120px;
    --wm-aud-spectrum-bar-gap: 1px;
    --wm-aud-plugin-slot-height: 22px;
    --wm-aud-plugin-power-size: 11px;
    --wm-aud-plugin-header-height: 34px;

    /* ---------- Transporte, tempo e automação ---------- */
    --wm-aud-transport-height: 44px;
    --wm-aud-transport-btn-size: 30px;
    --wm-aud-transport-btn-size-lg: 38px;
    --wm-aud-lcd-height: 40px;
    --wm-aud-lcd-radius: var(--wm-radius-sm);
    --wm-aud-automation-height: 56px;
    --wm-aud-automation-node-size: 9px;
    --wm-aud-automation-line-width: 1.5px;
    --wm-aud-metronome-beat-size: 10px;

    /* ---------- Ritmo próprio do editor ----------
       Medidor é DADO, não enfeite: a queda tem inércia física
       (ataque instantâneo, decaimento lento) e o pico fica
       retido. Não confunda com --wm-duration-* de interação. */
    --wm-duration-meter-attack: 20ms;
    --wm-duration-meter-decay: 340ms;
    --wm-duration-meter-hold: 1400ms;
    --wm-duration-meter-clip-hold: 3000ms;
    /* Taxa de atualização do medidor: 60 fps normal, 10 fps com
       movimento reduzido. Reduz-se a TAXA, nunca a informação. */
    --wm-aud-meter-fps: 60;
    --wm-aud-meter-fps-reduced: 10;
    /* Pulso do metrônomo e do count-in */
    --wm-duration-metronome-flash: 90ms;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      /* O medidor continua medindo — só para de deslizar. */
      --wm-duration-meter-attack: 0ms;
      --wm-duration-meter-decay: 0ms;
      --wm-duration-metronome-flash: 0ms;
      --wm-aud-meter-fps: 10;
    }
  }
}

/*
  ============================================================
  EDITOR DE IMAGEM — geometria (frente midia-imagem: img-*).
  Barras, painéis, alças, trilhas e miniaturas de um editor têm
  medidas próprias: uma alça de recorte não é um botão, uma régua
  não é uma barra de ferramentas. Tudo aqui, nada no componente.
  ============================================================
*/
@layer tokens {
  :root {
    /* Chrome */
    --wm-img-toolbar-width: 44px;
    --wm-img-toolbar-button: 32px;
    --wm-img-toolbar-gap: var(--wm-space-1);
    --wm-img-panel-width: 288px;
    --wm-img-panel-width-sm: 232px;
    --wm-img-row-height: 28px;
    --wm-img-ruler-size: 18px;
    --wm-img-canvas-min-height: 320px;
    --wm-img-canvas-pad: var(--wm-space-9);

    /* Xadrez de transparência */
    --wm-img-checker-size: 12px;
    --wm-img-checker-size-sm: 8px;

    /* Recorte e transformação */
    --wm-img-handle-size: 18px;      /* braço do canto em L */
    --wm-img-handle-weight: 3px;     /* espessura do L */
    --wm-img-handle-edge: 28px;      /* alça de aresta (barrinha) */
    --wm-img-handle-hit: 24px;       /* área de toque invisível */
    --wm-img-crop-line: 1px;

    /* Controles de ajuste */
    --wm-img-slider-label-w: 92px;   /* coluna do rótulo na linha de ajuste */
    --wm-img-slider-track: 4px;
    --wm-img-slider-thumb: 14px;
    --wm-img-slider-thumb-lg: 16px;
    --wm-img-zero-tick: 8px;

    /* Roda de graus (endireitar) */
    --wm-img-wheel-height: 40px;
    --wm-img-wheel-tick: 10px;
    --wm-img-wheel-tick-major: 16px;
    --wm-img-wheel-step: 8px;        /* distância entre marcas */

    /* Camadas */
    --wm-img-layer-thumb: 34px;
    --wm-img-layer-row: 44px;
    --wm-img-layer-indent: var(--wm-space-8);
    --wm-img-mask-thumb: 28px;

    /* Análise */
    --wm-img-histogram-height: 68px;
    --wm-img-histogram-height-lg: 96px;
    --wm-img-curves-size: 208px;
    --wm-img-levels-height: 84px;

    /* Comparação e amostragem */
    --wm-img-divider-width: 2px;
    --wm-img-divider-knob: 30px;
    --wm-img-loupe-size: 104px;
    --wm-img-loupe-pixel: 13px;

    /* Predefinições e cor */
    --wm-img-preset-cell: 96px;
    --wm-img-preset-cell-sm: 72px;
    --wm-img-swatch: 22px;
    --wm-img-color-wheel: 168px;
    --wm-img-color-field: 168px;

    /* Exportação */
    --wm-img-export-width: 420px;
  }
}

/*
  ============================================================
  FAIXAS (LANES) DO EDITOR — alturas
  Modelo tirado do editor VanceVideo do Will (SwiftUI, em produção):
  a timeline dele não é "vídeo + áudio", é um mapa de faixas com papel
  semântico — Cenas, Elementos, Legenda, Marcadores, Movimento, Voz e
  Trilha de fundo — e cada uma tem altura própria: a faixa principal é
  a mais alta, as auxiliares encolhem até virar fita.
  ============================================================
*/
@layer tokens {
  :root {
    --wm-lane-h-xl: 26px;   /* Cenas — a faixa principal */
    --wm-lane-h-lg: 18px;   /* Elementos, Movimento */
    --wm-lane-h-md: 16px;   /* Voz, Trilha de fundo */
    --wm-lane-h-sm: 15px;   /* Legenda */
    --wm-lane-h-xs: 7px;    /* Marcadores — fita fina */
    --wm-lane-hairline: 1px;
    --wm-lane-gap: 1px;
    --wm-lane-label-width: 96px;
    /* Mapa de faixas inteiro (soma das faixas + gaps) em modo compacto */
    --wm-lane-map-height: 116px;
  }
}

/*
  ============================================================
  WIC — Wortic IA-Controlável (camada de presença)
  Geometria do que o HUMANO vê enquanto a IA opera o componente:
  o cursor do agente, o halo do alvo, a narração e o desfazer.
  ============================================================
*/
@layer tokens {
  :root {
    --wm-wic-cursor-size: 18px;
    --wm-wic-cursor-dot: 7px;
    --wm-wic-cursor-label-offset: var(--wm-space-4);
    --wm-wic-halo-width: 2px;
    --wm-wic-halo-spread: 5px;
    --wm-wic-narration-min-height: 28px;
    --wm-wic-narration-max-width: 44ch;
    --wm-wic-trail-item-height: 26px;
    --wm-wic-badge-height: 20px;

    /* Ritmo da presença: o cursor desliza mais devagar que uma
       transição de controle, porque o olho precisa SEGUIR o trajeto.
       O pulso do alvo é um batimento, não uma transição. */
    --wm-duration-wic-travel: 520ms;
    --wm-duration-wic-pulse: 1400ms;
    --wm-duration-wic-narrate: 240ms;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      /* O cursor aparece direto no alvo, sem trajeto. */
      --wm-duration-wic-travel: 0ms;
      --wm-duration-wic-narrate: 0ms;
    }
  }
}

/*
  ============================================================
  EDITOR DE VÍDEO — geometria das FAIXAS e do que vive nelas
  (frente midia-video, sub-frente vid-trilhas):
  vid-track-audio, vid-track-header, vid-ghost-clip,
  vid-clip-selected, vid-edit-stats.

  Por que um bloco novo em vez de engordar o de cima: outros
  agentes escrevem neste arquivo agora, e append é a única
  edição segura. Semanticamente é a mesma família --wm-vid-*.

  Continua valendo a regra da escala: nada aqui posiciona em px.
  `left: calc(var(--wm-vid-at) * var(--wm-vid-scale))` e
  `width: calc(var(--wm-vid-len) * var(--wm-vid-scale))`, onde
  `--wm-vid-at` e `--wm-vid-len` são DADO (segundos, número puro).
  As medidas abaixo são de CHROME — altura de botão, espessura de
  hachura, respiro da onda — que não têm relação com o tempo.
  ============================================================
*/
@layer tokens {
  :root {
    /* ---------- vid-track-audio: a onda dentro da trilha ----------
       A onda é SVG esticado (preserveAspectRatio: none): o eixo do
       tempo acompanha o zoom sem redesenhar caminho. O respiro
       existe para o pico não encostar na borda e virar borrão. */
    --wm-vid-wave-inset: 3px;
    --wm-vid-wave-baseline-width: 1px;
    --wm-vid-wave-clip-width: 2px;
    --wm-vid-wave-stroke: 1px;
    /* Multiplicador de amplitude (ganho VISUAL, não de áudio).
       É dado por instância; aqui só o neutro. */
    --wm-vid-wave-gain: 1;

    --wm-vid-track-radius: var(--wm-radius-sm);
    --wm-vid-track-title-height: 15px;
    --wm-vid-track-pad: var(--wm-space-3);
    --wm-vid-track-scrim-width: 96px;

    /* ---------- vid-track-header ----------
       Os botões M/S/armar/bloquear são miúdos de propósito: num
       editor cabem sete faixas na tela e o alvo confortável vem da
       área de toque, não do desenho. */
    --wm-vid-track-btn: 18px;
    --wm-vid-track-btn-lg: 22px;
    --wm-vid-track-btn-hit: 24px;
    --wm-vid-track-tint-width: 3px;
    --wm-vid-track-header-gap: var(--wm-space-2);
    --wm-vid-track-header-min-height: 28px;
    --wm-vid-track-step-width: 14px;

    /* ---------- vid-ghost-clip ----------
       O fantasma é matéria removida: hachura diagonal fina, aresta
       tracejada e um botão "Ligar de volta" que só aparece de perto. */
    --wm-vid-ghost-hatch-size: 6px;
    --wm-vid-ghost-hatch-line: 1px;
    --wm-vid-ghost-min-width: 10px;
    --wm-vid-ghost-restore-height: 18px;
    --wm-vid-ghost-edge-width: 1px;
    --wm-vid-ghost-dash: 3px;

    /* ---------- vid-clip-selected ----------
       Seleção é ANEL, nunca preenchimento chapado: o corpo do clipe
       carrega miniatura e onda, e preencher apagaria a informação. */
    --wm-vid-selection-ring-width: 2px;
    --wm-vid-selection-ring-offset: 1px;
    --wm-vid-clip-hud-height: 20px;
    --wm-vid-clip-hud-offset: 6px;
    --wm-vid-clip-hud-max-width: 168px;

    /* ---------- vid-edit-stats ---------- */
    --wm-vid-stats-bar-height: 6px;
    --wm-vid-stats-bar-radius: var(--wm-radius-pill);
    --wm-vid-stats-min-width: 88px;
    --wm-vid-stats-dot: 7px;
  }
}

/*
  ============================================================
  VÍDEO — visualizador, transporte, raspagem, timecode,
  entrada/saída e marcador (frente vid-viewer).

  Geometria apenas; a cor mora em colors.css. Os insets das guias de
  enquadramento são PORCENTAGEM de propósito: a norma de broadcast
  fala em percentual do quadro, não em px — assim a guia continua
  correta em qualquer tamanho de viewer.
  ============================================================
*/
@layer tokens {
  :root {
    /* Viewer */
    --wm-vid-viewer-min-height: 132px;
    --wm-vid-viewer-badge-inset: var(--wm-space-5);
    --wm-vid-safe-action-inset: 5%;   /* action-safe: 90% do quadro */
    --wm-vid-safe-title-inset: 10%;   /* title-safe: 80% do quadro */
    --wm-vid-guide-width: 1px;
    --wm-vid-viewer-ratio: 16 / 9;
    --wm-vid-viewer-vertical-max: 260px; /* teto do palco 9:16, para não virar coluna gigante numa tela horizontal */
    --wm-vid-viewer-play-size: 56px;
    --wm-vid-viewer-play-size-lg: 72px;
    --wm-vid-ab-divider-width: 2px;
    --wm-vid-ab-handle: 26px;
    --wm-vid-ab-label-height: 22px;
    --wm-vid-viewer-vazio-max-width: 26ch;

    /* Timecode — largura fixa por dígito, para o segmento não mudar
       de tamanho ao trocar de "09" para "10" (número não pode dançar). */
    --wm-vid-timecode-seg-width: 2.1ch;
    --wm-vid-timecode-seg-width-grande: 2.3ch;

    /* Transporte */
    --wm-vid-transport-gap: var(--wm-space-3);
    --wm-vid-transport-radius: var(--wm-radius-sm);
    --wm-vid-transport-icon: var(--wm-icon-sm);
    --wm-vid-transport-icon-lg: var(--wm-icon-lg);

    /* Raspagem — a barra é fina, mas o alvo do ponteiro não pode ser.
       --wm-vid-scrubber-hit é a altura clicável em volta dela. */
    --wm-vid-scrubber-hit: 22px;
    --wm-vid-scrub-preview-gap: var(--wm-space-4);
    --wm-vid-scrub-preview-radius: var(--wm-radius-sm);
    --wm-vid-scrub-preview-tip: 5px;

    /* Timecode */
    --wm-vid-timecode-width-sm: 92px;
    --wm-vid-timecode-space-width: 62px;

    /* Entrada e saída */
    --wm-vid-inout-flag-width: 7px;
    --wm-vid-inout-flag-height: 13px;
    --wm-vid-inout-bar-height: 3px;

    /* Marcador */
    --wm-vid-marker-hit: 16px;
    --wm-vid-marker-stem-height: 12px;
    --wm-vid-marker-label-height: 20px;
    --wm-vid-marker-lane-height: 22px;
  }
}

/*
  ============================================================
  EDITOR DE VÍDEO — FERRAMENTAS DE CORTE (frente midia-video)
  vid-trim-handles, vid-ripple, vid-roll, vid-blade,
  vid-snap-guide, vid-range-selection.

  Uma ferramenta de corte é uma peça de PRECISÃO: o alvo tem que
  ser grande o bastante para o dedo/mouse acertar, e a marca que
  ela deixa na tela tem que ser fina o bastante para não mentir
  sobre onde o corte cai. Por isso quase todo par aqui é
  "espessura da marca" + "área de acerto" — e são números
  diferentes de propósito.

  Reaproveitam o que já existe: --wm-vid-trim-width,
  --wm-vid-trim-grip, --wm-vid-trim-grip-height, --wm-vid-roll-width,
  --wm-vid-snap-width, --wm-vid-range-handle, --wm-vid-track-height.
  ============================================================
*/
@layer tokens {
  :root {
    /* Trim — o HUD de quadros e a aresta de fim de mídia */
    --wm-vid-trim-hud-height: 18px;
    --wm-vid-trim-hud-offset: var(--wm-space-3);
    --wm-vid-trim-limit-width: 3px;

    /* Ripple — a lacuna hachurada e a fita que mostra o deslocamento */
    --wm-vid-ripple-hatch: 7px;
    --wm-vid-ripple-shift-height: 15px;
    --wm-vid-ripple-arrow: 9px;

    /* Roll — o pegador é mais alto que o de trim porque a alça de
       roll é agarrada no meio da junção, sem borda de clipe para
       mirar. */
    --wm-vid-roll-grip-height: 20px;
    --wm-vid-roll-hit: 22px;

    /* Lâmina — a guia é hairline; a área de acerto, não. */
    --wm-vid-blade-guide-width: 1px;
    --wm-vid-blade-head: 13px;
    --wm-vid-blade-hit: 17px;
    --wm-vid-blade-notch: 5px;

    /* Guia magnética — nó nas pontas e a distância em que o ímã puxa */
    --wm-vid-snap-node: 5px;
    --wm-vid-snap-tolerance: 9px;
    --wm-vid-snap-label-offset: var(--wm-space-3);

    /* Seleção de intervalo — alça larga o bastante para pegar,
       tampa fina o bastante para não esconder o quadro. */
    --wm-vid-range-handle-height: 22px;
    --wm-vid-range-cap: 3px;
    --wm-vid-range-hit: 14px;
  }
}

/*
  ============================================================
  EDITOR DE VÍDEO — sobreposições no quadro e painéis
  (frente midia-video, sub-frente vid-overlays)
  vid-transform-overlay, vid-crop-overlay, vid-inspector,
  vid-keyframe-editor, vid-timeline-zoom.

  Duas geometrias diferentes convivem aqui, e confundi-las é o
  erro clássico:

   1. SOBRE O QUADRO (transform, crop) tudo que é POSIÇÃO vai em
      PORCENTAGEM, porque o quadro redimensiona com a janela. Só
      o que é TAMANHO DE ALÇA fica em px — a alça precisa ter o
      mesmo tamanho aparente em qualquer viewer.
   2. NA RÉGUA (keyframe editor) a posição continua em SEGUNDOS:
      left: calc(var(--wm-vid-at) * var(--wm-vid-scale)).

  A área de toque das alças é maior que o desenho delas
  (--wm-vid-overlay-hit): 11px de alça com 22px de alvo é o que
  torna o arraste possível sem engrossar o desenho.
  ============================================================
*/
@layer tokens {
  :root {
    /* ---- Alças sobre o quadro (transform) ---- */
    --wm-vid-overlay-handle-lg: 14px;
    --wm-vid-overlay-handle-radius: 2px;
    --wm-vid-overlay-hit: 22px;
    --wm-vid-overlay-line-width: 1px;
    --wm-vid-overlay-edge-handle-len: 22px;
    --wm-vid-overlay-rotate-arm-lg: 36px;
    --wm-vid-overlay-rotate-knob: 13px;
    --wm-vid-overlay-hud-height: 22px;
    --wm-vid-overlay-hud-offset: var(--wm-space-5);
    --wm-vid-overlay-center-size: 13px;

    /* ---- Recorte (crop) ---- */
    --wm-vid-crop-corner-len: 20px;
    --wm-vid-crop-corner-thickness: 3px;
    --wm-vid-crop-edge-len: 26px;
    --wm-vid-crop-hit: 24px;
    --wm-vid-crop-ratio-height: 24px;
    /* Espalhamento do véu de fora. É um box-shadow numa folha do
       tamanho exato do recorte, com overflow:hidden no palco — assim
       o escuro cobre TODO o resto do quadro sem quatro divs, que em
       zoom fracionário deixam fresta clara na borda do recorte.
       200vmax cobre qualquer viewport sem virar número mágico. */
    --wm-vid-crop-scrim-spread: 200vmax;

    /* ---- Inspetor de propriedades ---- */
    --wm-vid-inspector-width-sm: 248px;
    --wm-vid-inspector-width-lg: 344px;
    --wm-vid-inspector-tabs-height: 30px;
    --wm-vid-inspector-row-height: 26px;
    --wm-vid-inspector-label-width: 96px;
    --wm-vid-inspector-field-width: 68px;
    --wm-vid-inspector-field-width-sm: 54px;
    --wm-vid-inspector-group-title-height: 22px;
    --wm-vid-inspector-slider-height: 3px;
    --wm-vid-inspector-slider-thumb: 11px;

    /* ---- Editor de keyframes ---- */
    --wm-vid-keyframe-size-lg: 12px;
    --wm-vid-keyframe-hit: 20px;
    --wm-vid-curve-height-sm: 104px;
    --wm-vid-curve-stroke: 2px;
    --wm-vid-curve-handle-size: 7px;
    --wm-vid-curve-arm-width: 1px;
    --wm-vid-keyframe-ruler-height: 22px;
    --wm-vid-keyframe-gutter: 44px;
    --wm-vid-keyframe-lane-height: 20px;

    /* ---- Zoom da timeline ---- */
    --wm-vid-zoom-width-lg: 184px;
    --wm-vid-zoom-height: 26px;
    --wm-vid-zoom-track-height: 3px;
    --wm-vid-zoom-thumb: 12px;
    --wm-vid-zoom-step-btn: 22px;
    --wm-vid-zoom-notch-width: 2px;
    --wm-vid-zoom-notch-height: 6px;
    --wm-vid-zoom-readout-width: 46px;
  }
}

/*
  ============================================================
  CLIPE DE VÍDEO — limiares de largura
  Um clipe de 40 segundos e um de meio segundo são o mesmo
  componente em larguras incomparáveis. Em vez de deixar o
  conteúdo transbordar, o clipe DESISTE em degraus: some a
  miniatura de saída, depois a de entrada, depois a duração,
  e no fim resta só a faixa de tipo colorida.
  ============================================================
*/
@layer tokens {
  :root {
    --wm-vid-clip-limiar-tira: 24px;
    --wm-vid-clip-limiar-nome: 72px;
    --wm-vid-clip-limiar-duas-miniaturas: 150px;
    --wm-vid-clip-badge-gap: var(--wm-space-2);
  }
}

/*
  ============================================================
  EDITOR DE VÍDEO — geometria de EFEITO, COR e SAÍDA
  (frente midia-video, sub-frente vid-cor-saida)
  vid-effects-browser, vid-transitions-strip, vid-color-wheels,
  vid-scopes, vid-export-sheet.

  Bloco novo em vez de engordar os de cima porque outros agentes
  escrevem neste arquivo agora — append é a única edição segura.
  Semanticamente é a mesma família --wm-vid-*.

  Duas famílias de medida convivem aqui:
    · CHROME  — ladrilho, gutter, altura de linha: medida de interface;
    · INSTRUMENTO — o lado do scope, o diâmetro da roda: medida que
      NÃO acompanha densidade de UI, porque é área de leitura de sinal.
  A transição é a exceção: a largura dela É tempo,
  `calc(var(--wm-vid-len) * var(--wm-vid-scale))`, nunca um px.
  ============================================================
*/
@layer tokens {
  :root {
    /* ---------- vid-effects-browser ----------
       O ladrilho é 16:9 porque a pré-visualização é um quadro de
       vídeo: qualquer outra proporção mente sobre o que o efeito
       faz. A altura do rótulo é fixa para a grade não sarrafear
       quando um nome quebra em duas linhas. */
    --wm-vid-effect-tile-sm: 104px;
    --wm-vid-effect-tile-lg: 176px;
    --wm-vid-effect-preview-height: 76px;
    --wm-vid-effect-preview-height-sm: 58px;
    --wm-vid-effect-preview-height-lg: 99px;
    --wm-vid-effect-label-height: 30px;
    --wm-vid-effect-gap: var(--wm-space-6);
    --wm-vid-effect-radius: var(--wm-radius-md);
    --wm-vid-effect-badge: 16px;
    --wm-vid-effect-chip-height: 22px;
    --wm-vid-browser-width: 468px;
    --wm-vid-browser-height: 396px;
    --wm-vid-browser-bar-height: var(--wm-control-height-lg);
    /* Volta do laço da pré-visualização. Longo o bastante para o
       efeito se explicar, curto o bastante para não hipnotizar. */
    --wm-duration-vid-preview: 2400ms;
    --wm-duration-vid-preview-fast: 1200ms;

    /* ---------- vid-transitions-strip ----------
       A transição mora NA JUNTA entre dois clipes: a largura vem do
       tempo. Só a altura e as alças são chrome. */
    --wm-vid-transition-height: 34px;
    --wm-vid-transition-height-lg: 46px;
    --wm-vid-transition-min-width: 14px;
    --wm-vid-transition-radius: var(--wm-radius-xs);
    --wm-vid-transition-handle: 7px;
    --wm-vid-transition-grip-height: 12px;
    --wm-vid-transition-glyph: 16px;
    --wm-vid-transition-glyph-lg: 22px;
    --wm-vid-transition-strip-pad: var(--wm-space-5);
    --wm-vid-transition-duration-max: 24px;

    /* ---------- vid-color-wheels ----------
       O disco é INSTRUMENTO: 108px é o menor diâmetro em que o
       puck ainda anda com resolução útil no trackpad. */
    --wm-vid-wheel-size-lg: 136px;
    --wm-vid-wheel-ring-width: 3px;
    --wm-vid-wheel-puck-ring-width: 2px;
    --wm-vid-wheel-crosshair: 9px;
    --wm-vid-wheel-crosshair-width: 1px;
    --wm-vid-wheel-gap: var(--wm-space-9);
    --wm-vid-wheel-value-width: 56px;
    --wm-vid-wheel-lift-height: 5px;
    --wm-vid-wheel-lift-thumb: 11px;
    --wm-vid-wheel-reset: 18px;
    --wm-vid-wheel-head-height: 18px;

    /* ---------- vid-scopes ----------
       Lado do vetorscópio e altura do monitor de forma de onda. A
       gutter da esquerda é onde mora a escala IRE — sem ela o
       traço não significa número nenhum. */
    --wm-vid-scope-size-lg: 232px;
    --wm-vid-scope-wave-height: 152px;
    --wm-vid-scope-wave-height-lg: 208px;
    --wm-vid-scope-ire-gutter: 28px;
    --wm-vid-scope-header-height: var(--wm-control-height-md);
    --wm-vid-scope-trace-width: 1px;
    --wm-vid-scope-graticule-width: 1px;
    --wm-vid-scope-target-size: 9px;
    --wm-vid-scope-pad: var(--wm-space-5);
    --wm-vid-scope-gap: var(--wm-space-6);

    /* ---------- vid-export-sheet ---------- */
    --wm-vid-export-width-lg: 668px;
    --wm-vid-export-radius: var(--wm-radius-xl);
    --wm-vid-export-max-height: 78vh;
    --wm-vid-export-preset-height: 64px;
    --wm-vid-export-preset-min: 148px;
    --wm-vid-export-row-height: var(--wm-control-height-md);
    --wm-vid-export-label-width: 124px;
    --wm-vid-export-thumb-width: 88px;
    --wm-vid-export-progress-height: 5px;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --wm-duration-vid-preview: 0ms;
      --wm-duration-vid-preview-fast: 0ms;
    }
  }
}

/*
  ============================================================
  STEP BY STEP — família stepper-flow / stepper-progress /
  stepper-mobile / stepper-transitions

  Uma escala só para os quatro componentes: o marcador da etapa tem o
  mesmo diâmetro na barra horizontal, na coluna vertical e no app
  mobile, senão o mesmo fluxo parece três produtos diferentes quando
  a tela muda de largura. Tudo derivado da escala de controle e de
  espaço — nenhum número inventado.
  ============================================================
*/
@layer tokens {
  :root {
    /* ---------- marcador (o número/ícone dentro do círculo) ---------- */
    --wm-step-marker-sm: var(--wm-control-height-sm);   /* 24px — compacta  */
    --wm-step-marker: var(--wm-control-height-md);      /* 28px — padrão    */
    --wm-step-marker-lg: var(--wm-control-height-lg);   /* 34px — vertical  */
    --wm-step-marker-ring: var(--wm-border-width-thick);
    --wm-step-marker-radius: var(--wm-radius-pill);

    /* ---------- conector (o traço entre dois marcadores) ---------- */
    --wm-step-connector: 2px;
    --wm-step-connector-min: var(--wm-space-10);        /* 24px de folga    */
    --wm-step-connector-dash: 4px;

    /* ---------- espaçamento do passo ---------- */
    --wm-step-gap: var(--wm-space-6);
    --wm-step-gap-sm: var(--wm-space-4);
    --wm-step-row-gap: var(--wm-space-3);
    --wm-step-label-max: 160px;
    --wm-step-label-max-sm: 108px;
    --wm-step-pad-block: var(--wm-space-5);

    /* ---------- progresso ---------- */
    --wm-step-bar-height: var(--wm-space-3);            /* 6px             */
    --wm-step-bar-height-thin: 3px;                     /* a fina do topo  */
    --wm-step-bar-radius: var(--wm-radius-pill);
    --wm-step-ring-size: 96px;
    --wm-step-ring-size-sm: 64px;
    --wm-step-ring-stroke: var(--wm-space-3);
    --wm-step-segment-gap: var(--wm-space-2);

    /* ---------- mobile ---------- */
    --wm-step-dot: var(--wm-space-4);                   /* 8px             */
    --wm-step-dot-atual: var(--wm-space-9);             /* 20px — pílula   */
    --wm-step-dot-gap: var(--wm-space-3);
    --wm-step-sheet-radius: var(--wm-radius-sheet-top);
    --wm-step-safe-bottom: env(safe-area-inset-bottom, 0px);
    /* O inset real do home indicator do iPhone em retrato. Existe para
       a MOLDURA de demonstração poder mostrar a área segura numa tela
       de desktop, onde env(safe-area-inset-*) vale 0 e o problema
       ficaria invisível justamente na página que existe para mostrá-lo. */
    --wm-step-safe-bottom-sim: 34px;
    --wm-step-safe-left: env(safe-area-inset-left, 0px);
    --wm-step-safe-right: env(safe-area-inset-right, 0px);
    --wm-step-edge-gesture: var(--wm-space-9);          /* 20px de borda   */
    --wm-step-phone-width: 320px;
    --wm-step-phone-height: 520px;

    /* ---------- transições entre etapas ---------- */
    --wm-step-slide-offset: var(--wm-space-11);         /* 32px de deslize */
    --wm-step-slide-offset-sm: var(--wm-space-9);
    --wm-step-panel-min-height: 148px;
    --wm-duration-step-slide: var(--wm-duration-normal);
    --wm-duration-step-fade: var(--wm-duration-fast);
    --wm-duration-step-height: var(--wm-duration-normal);
    --wm-ease-step-in: var(--wm-ease-decelerate);
    --wm-ease-step-out: var(--wm-ease-exit);
  }

  /* Movimento reduzido: as etapas trocam na hora, sem deslize nem
     animação de altura. O conteúdo continua correto — só não viaja. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --wm-duration-step-slide: 0ms;
      --wm-duration-step-fade: 0ms;
      --wm-duration-step-height: 0ms;
      --wm-step-slide-offset: 0px;
      --wm-step-slide-offset-sm: 0px;
    }
  }
}

/*
  ============================================================
  IA NO CAMPO — geometria da família field-ai
  (frente field-ai: field-ai, field-ai-panel, field-ai-ask,
   field-ai-config, field-ai-auto)

  O gatilho mora DENTRO do campo, então sua altura é derivada da
  altura de controle, não escolhida: 22px cabe com folga de 3px de
  cada lado num campo de 28px (--wm-control-height-md) e 18px num
  campo pequeno de 24px. Se a escala de controle mudar, isto muda
  junto — por isso é token, não número.

  Bloco novo no fim do arquivo porque outros agentes escrevem aqui
  agora; append é a única edição segura.
  ============================================================
*/
@layer tokens {
  :root {
    /* ---------- gatilho dentro do campo ---------- */
    --wm-field-ai-trigger: 22px;
    --wm-field-ai-trigger-sm: 18px;
    --wm-field-ai-trigger-inset: var(--wm-space-3);   /* respiro até a borda  */
    /* 16px num botão de 22px. Começou em 14 e o primeiro print mostrou
       por que não dá: a faísca some no fundo do campo. */
    --wm-field-ai-glyph: var(--wm-icon-md);
    --wm-field-ai-glyph-sm: var(--wm-icon-sm);
    --wm-field-ai-dot: 6px;            /* ponto de "precisa de informação"   */
    --wm-field-ai-ring: 2px;           /* anel do estado pensando            */

    /* ---------- escrita chegando no campo ---------- */
    --wm-field-ai-caret-width: 1.5px;
    --wm-field-ai-caret-height: var(--wm-leading-body);
    --wm-duration-field-ai-token: var(--wm-duration-ai-token);
    --wm-duration-field-ai-caret: var(--wm-duration-ai-caret);
    --wm-duration-field-ai-settle: var(--wm-duration-slow);

    /* ---------- marca do que foi preenchido por IA ---------- */
    --wm-field-ai-mark-width: 2px;     /* fita vertical na borda do campo    */
    --wm-field-ai-badge-height: 16px;  /* selo "IA" ao lado do rótulo        */

    /* ---------- painel e popover ---------- */
    --wm-field-ai-panel-width: 320px;
    --wm-field-ai-panel-width-lg: 420px;
    --wm-field-ai-panel-pad: var(--wm-space-6);
    --wm-field-ai-panel-max-height: 60vh;
    /* altura a reservar embaixo do campo quando o popover nasce aberto */
    --wm-field-ai-panel-reserva: 320px;
    --wm-field-ai-proposta-max-height: 168px;

    /* ---------- contexto e configuração ---------- */
    --wm-field-ai-ctx-height: 20px;    /* chip de fonte de contexto          */
    --wm-field-ai-config-label: 116px; /* coluna de rótulo da ficha          */
    --wm-field-ai-config-min: 280px;

    /* ---------- automode ---------- */
    --wm-field-ai-auto-bar-height: 32px;
    --wm-field-ai-auto-undo: var(--wm-control-height-xs);
  }

  /* Movimento reduzido: o texto aparece inteiro, o cursor não pisca.
     Nada de informação depende da animação de escrita. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --wm-duration-field-ai-token: 0ms;
      --wm-duration-field-ai-caret: 0ms;
      --wm-duration-field-ai-settle: 0ms;
    }
  }
}