/* Wortic macOS UI Kit — Semantic Color Tokens Labels, fills, surfaces, separators e accent — modelados sobre o padrão de camadas do macOS (label hierarchy + fill hierarchy). Todos os componentes devem consumir SOMENTE estas variáveis semânticas, nunca --wm-brand-* diretamente e nunca valores hex soltos. Liquid Glass 2026: - Light: superfícies quase-brancas frias flutuando sobre wallpaper azulado; sombras em 3 camadas (ring hairline + contato + ambiente). - Dark: superfícies #1c1c1f→#2c2c30, nunca preto puro; mesmas sombras, mais profundas. */ @layer tokens { :root, :root[data-theme="light"] { color-scheme: light; /* Labels (texto) — hierarquia de contraste */ --wm-label-primary: rgba(0, 0, 0, 0.92); --wm-label-secondary: rgba(0, 0, 0, 0.56); --wm-label-tertiary: rgba(0, 0, 0, 0.36); --wm-label-quaternary: rgba(0, 0, 0, 0.2); --wm-label-on-accent: #ffffff; /* Fills (formas de controle: checkbox, switch track, etc.) */ --wm-fill-primary: rgba(0, 10, 30, 0.08); --wm-fill-secondary: rgba(0, 10, 30, 0.055); --wm-fill-tertiary: rgba(0, 10, 30, 0.035); --wm-fill-quaternary: rgba(0, 10, 30, 0.02); /* Surfaces (fundos de janela / painel) — brancas e frias */ --wm-surface-base: #eef1f6; --wm-surface-primary: #ffffff; --wm-surface-secondary: #f7f8fa; --wm-surface-tertiary: #eff1f5; --wm-surface-elevated: #ffffff; --wm-surface-sidebar: #f0f2f6; --wm-surface-sunken: #e8ebf0; --wm-surface-overlay: rgba(255, 255, 255, 0.84); /* Wallpaper de desktop (páginas de demo / exemplos) */ --wm-wallpaper: radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.1), transparent 60%), radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.07), transparent 55%), linear-gradient(180deg, #eef1f6 0%, #e3e8f0 100%); /* Separators — hairline quase invisível */ --wm-separator: rgba(0, 0, 0, 0.08); --wm-separator-strong: rgba(0, 0, 0, 0.16); --wm-separator-opaque: #d8dbe0; /* Accent — azul escolhido pelo Will (#1d59f0). Branco em cima: 5.62:1. */ --wm-accent: #1d59f0; --wm-accent-hover: #1a50d8; --wm-accent-pressed: #1745bb; --wm-accent-fill: rgba(29, 89, 240, 0.12); /* accent como TEXTO/icone — separado do accent de preenchimento */ --wm-accent-text: var(--wm-accent); --wm-accent-fill-strong: rgba(29, 89, 240, 0.22); --wm-accent-secondary: var(--wm-brand-cyan); /* Gradientes de marca — usar só em momentos-assinatura */ --wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%); --wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%); /* Semantic status */ --wm-success: #127a3a; --wm-success-fill: rgba(18, 122, 58, 0.12); --wm-warning: #8f5d12; --wm-warning-fill: rgba(143, 93, 18, 0.12); --wm-error: #c62f25; --wm-error-fill: rgba(198, 47, 37, 0.12); /* SOLIDOS: unicos tokens que podem receber TEXTO BRANCO em cima. Os de cima sao para TEXTO colorido sobre tint. Nao troque os papeis. */ --wm-success-solid: #127a3a; --wm-warning-solid: #8f5d12; --wm-error-solid: #c62f25; --wm-info: var(--wm-accent); --wm-info-fill: rgba(29, 89, 240, 0.12); /* Shadows — sempre 3 camadas: ring hairline + contato + ambiente */ --wm-shadow-color: 220deg 30% 5%; --wm-shadow-ring: 0 0 0 0.5px rgba(0, 0, 0, 0.05); --wm-shadow-1: 0 0.5px 1px hsl(var(--wm-shadow-color) / 0.05), 0 1px 3px hsl(var(--wm-shadow-color) / 0.06); --wm-shadow-2: 0 1px 2px hsl(var(--wm-shadow-color) / 0.05), 0 3px 8px hsl(var(--wm-shadow-color) / 0.08); --wm-shadow-3: 0 2px 6px hsl(var(--wm-shadow-color) / 0.05), 0 12px 32px -8px hsl(var(--wm-shadow-color) / 0.16); --wm-shadow-4: 0 2px 6px hsl(var(--wm-shadow-color) / 0.05), 0 18px 50px -12px hsl(var(--wm-shadow-color) / 0.22); /* Sombras compostas prontas (ring + contato + ambiente) */ --wm-shadow-panel: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px -6px rgba(0, 0, 0, 0.1); --wm-shadow-floating: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 28px -8px rgba(0, 0, 0, 0.16); --wm-shadow-window: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.05), 0 18px 50px -12px rgba(0, 0, 0, 0.22); /* Inner highlights (superfícies elevadas no light) */ --wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18); --wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4); /* Materials (glass/vibrancy) */ --wm-material-sidebar-bg: rgba(243, 246, 250, 0.62); --wm-material-toolbar-bg: rgba(255, 255, 255, 0.65); --wm-material-popover-bg: rgba(252, 253, 255, 0.75); --wm-material-sheet-bg: rgba(255, 255, 255, 0.85); --wm-material-hud-bg: rgba(28, 28, 31, 0.75); --wm-material-hud-label: #ffffff; --wm-material-glass-border: rgba(255, 255, 255, 0.45); --wm-material-blur: 40px; --wm-material-blur-strong: 44px; --wm-material-blur-heavy: 56px; --wm-material-saturate: 2; --wm-material-saturate-strong: 2; --wm-material-saturate-heavy: 2.1; /* Superficies de CONTROLE (face fisica de botao/thumb). Existem para que nenhum componente precise declarar cinza na mao. */ --wm-control-face-top: #ffffff; --wm-control-face-bottom: #f5f5f3; --wm-control-face-top-hover: #ffffff; --wm-control-face-bottom-hover: #fafaf9; --wm-control-face-top-pressed: #ececea; --wm-control-face-bottom-pressed: #e7e7e4; --wm-control-thumb-top: #ffffff; --wm-control-thumb-bottom: #f4f4f2; --wm-control-thumb-disabled: #fcfcfb; /* Scrollbar */ --wm-scrollbar-thumb: rgba(0, 0, 0, 0.2); --wm-scrollbar-thumb-hover: rgba(0, 0, 0, 0.32); /* Selection (texto selecionado) */ --wm-selection-bg: rgba(29, 89, 240, 0.24); /* Séries categóricas de gráfico (charts) — ordem FIXA, nunca ciclar. Validada (CVD ΔE ≥ 8 adjacente, piso normal ≥ 15) sobre #ffffff. Slots 3–5 ficam abaixo de 3:1 no light: exigem rótulo direto ou tabela. */ --wm-chart-1: #1d59f0; --wm-chart-2: #eb6834; --wm-chart-3: #1baf7a; --wm-chart-4: #eda100; --wm-chart-5: #e87ba4; --wm-chart-6: #008300; /* Bolha do usuário no chat (message-bubble) — azul um tom mais claro que o accent, para o gradiente vertical ter relevo. */ --wm-msg-user-top: #2a5cff; /* Brand loader — anel e "ping" tirados dos SVGs oficiais da marca (ring.svg). Cor fixa do asset, não do tema: por isso vive aqui como token dedicado em vez de reusar --wm-label-*/--wm-accent. */ --wm-brand-loader-ink: #000000; --wm-brand-loader-glow: #2b6be0; /* Syntax highlighting (code-block) — paleta PRÓPRIA por PAPEL, nunca emprestada de --wm-accent/--wm-success/--wm-warning/--wm-brand-*. Se o accent mudar de marca, o código não pode mudar de cor junto. Contraste medido sobre --wm-surface-primary (4.5:1 mínimo, texto de 12px): keyword 5.62:1, string 5.43:1, number 5.61:1, comment 4.74:1, function 6.48:1, type 6.42:1. */ --wm-code-keyword: #1d59f0; --wm-code-string: #127a3a; --wm-code-number: #8f5d12; --wm-code-comment: #737373; --wm-code-function: #6e40c9; --wm-code-type: #106b5a; } :root[data-theme="dark"] { color-scheme: dark; --wm-label-primary: rgba(255, 255, 255, 0.94); --wm-label-secondary: rgba(255, 255, 255, 0.6); --wm-label-tertiary: rgba(255, 255, 255, 0.38); --wm-label-quaternary: rgba(255, 255, 255, 0.22); --wm-label-on-accent: #ffffff; --wm-fill-primary: rgba(255, 255, 255, 0.13); --wm-fill-secondary: rgba(255, 255, 255, 0.09); --wm-fill-tertiary: rgba(255, 255, 255, 0.06); --wm-fill-quaternary: rgba(255, 255, 255, 0.035); --wm-surface-base: #1c1c1f; --wm-surface-primary: #262629; --wm-surface-secondary: #212124; --wm-surface-tertiary: #2c2c30; --wm-surface-elevated: #2f2f33; --wm-surface-sidebar: #202023; --wm-surface-sunken: #161618; --wm-surface-overlay: rgba(38, 38, 41, 0.85); --wm-wallpaper: radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.07), transparent 60%), radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.09), transparent 55%), linear-gradient(180deg, #17191e 0%, #101114 100%); --wm-separator: rgba(255, 255, 255, 0.08); --wm-separator-strong: rgba(255, 255, 255, 0.15); --wm-separator-opaque: #3a3a3e; --wm-accent: #1d59f0; --wm-accent-hover: #1a50d8; --wm-accent-pressed: #1745bb; --wm-accent-fill: rgba(29, 89, 240, 0.22); /* accent como TEXTO/icone no escuro precisa clarear (6.74:1) */ --wm-accent-text: #83a4f7; --wm-accent-fill-strong: rgba(29, 89, 240, 0.34); --wm-accent-secondary: var(--wm-brand-cyan); --wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%); --wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%); --wm-success: #32d074; --wm-success-fill: rgba(50, 208, 116, 0.16); --wm-warning: #e2a53d; --wm-warning-fill: rgba(226, 165, 61, 0.16); --wm-error: #ff8a80; --wm-error-fill: rgba(255, 138, 128, 0.12); /* SOLIDOS (mesmos do light): so eles recebem texto branco */ --wm-success-solid: #127a3a; --wm-warning-solid: #8f5d12; --wm-error-solid: #c62f25; --wm-info: #83a4f7; --wm-info-fill: rgba(131, 164, 247, 0.10); --wm-shadow-color: 220deg 30% 2%; --wm-shadow-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.08); --wm-shadow-1: 0 0.5px 1px hsl(var(--wm-shadow-color) / 0.3), 0 1px 3px hsl(var(--wm-shadow-color) / 0.3); --wm-shadow-2: 0 1px 2px hsl(var(--wm-shadow-color) / 0.3), 0 3px 10px hsl(var(--wm-shadow-color) / 0.36); --wm-shadow-3: 0 2px 6px hsl(var(--wm-shadow-color) / 0.3), 0 14px 36px -8px hsl(var(--wm-shadow-color) / 0.5); --wm-shadow-4: 0 2px 8px hsl(var(--wm-shadow-color) / 0.35), 0 24px 64px -12px hsl(var(--wm-shadow-color) / 0.6); --wm-shadow-panel: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -6px rgba(0, 0, 0, 0.5); --wm-shadow-floating: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 36px -8px rgba(0, 0, 0, 0.55); --wm-shadow-window: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.5), 0 24px 64px -12px rgba(0, 0, 0, 0.65); --wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09); --wm-material-sidebar-bg: rgba(28, 28, 32, 0.6); --wm-material-toolbar-bg: rgba(34, 34, 38, 0.6); --wm-material-popover-bg: rgba(40, 40, 44, 0.72); --wm-material-sheet-bg: rgba(34, 34, 38, 0.84); --wm-material-hud-bg: rgba(18, 18, 20, 0.78); --wm-material-hud-label: #ffffff; --wm-material-glass-border: rgba(255, 255, 255, 0.14); --wm-material-blur: 40px; --wm-material-blur-strong: 44px; --wm-material-blur-heavy: 56px; --wm-material-saturate: 1.8; --wm-material-saturate-strong: 1.8; --wm-material-saturate-heavy: 1.9; --wm-control-face-top: #58585f; --wm-control-face-bottom: #4b4b51; --wm-control-face-top-hover: #616168; --wm-control-face-bottom-hover: #55555c; --wm-control-face-top-pressed: #414147; --wm-control-face-bottom-pressed: #3b3b41; --wm-control-thumb-top: #ffffff; --wm-control-thumb-bottom: #f4f4f2; --wm-control-thumb-disabled: #77777d; --wm-scrollbar-thumb: rgba(255, 255, 255, 0.22); --wm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34); --wm-selection-bg: rgba(29, 89, 240, 0.32); /* Séries de gráfico — mesmos matizes reescalonados para o escuro. Validada (todas as checagens PASS) sobre #262629. */ --wm-chart-1: #4a80f0; --wm-chart-2: #d95926; --wm-chart-3: #199e70; --wm-chart-4: #c98500; --wm-chart-5: #d55181; --wm-chart-6: #008300; --wm-msg-user-top: #4f88ff; --wm-brand-loader-ink: rgba(255, 255, 255, 0.92); --wm-brand-loader-glow: #5a90ff; /* Syntax highlighting — paridade com --wm-accent-text/--wm-success/ --wm-warning do escuro (contraste sobre --wm-surface-primary #262629): keyword 6.19:1, string 7.48:1, number 6.96:1, comment 5.30:1, function 5.28:1, type 7.10:1. */ --wm-code-keyword: #83a4f7; --wm-code-string: #32d074; --wm-code-number: #e2a53d; --wm-code-comment: #999999; --wm-code-function: #b083f0; --wm-code-type: #39c5bb; } /* prefers-color-scheme automático quando não há data-theme explícito. Manter em PARIDADE EXATA com :root[data-theme="dark"] acima. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --wm-label-primary: rgba(255, 255, 255, 0.94); --wm-label-secondary: rgba(255, 255, 255, 0.6); --wm-label-tertiary: rgba(255, 255, 255, 0.38); --wm-label-quaternary: rgba(255, 255, 255, 0.22); --wm-label-on-accent: #ffffff; --wm-fill-primary: rgba(255, 255, 255, 0.13); --wm-fill-secondary: rgba(255, 255, 255, 0.09); --wm-fill-tertiary: rgba(255, 255, 255, 0.06); --wm-fill-quaternary: rgba(255, 255, 255, 0.035); --wm-surface-base: #1c1c1f; --wm-surface-primary: #262629; --wm-surface-secondary: #212124; --wm-surface-tertiary: #2c2c30; --wm-surface-elevated: #2f2f33; --wm-surface-sidebar: #202023; --wm-surface-sunken: #161618; --wm-surface-overlay: rgba(38, 38, 41, 0.85); --wm-wallpaper: radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.07), transparent 60%), radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.09), transparent 55%), linear-gradient(180deg, #17191e 0%, #101114 100%); --wm-separator: rgba(255, 255, 255, 0.08); --wm-separator-strong: rgba(255, 255, 255, 0.15); --wm-separator-opaque: #3a3a3e; --wm-accent: #1d59f0; --wm-accent-hover: #1a50d8; --wm-accent-pressed: #1745bb; --wm-accent-fill: rgba(29, 89, 240, 0.22); /* accent como TEXTO/icone no escuro precisa clarear (6.74:1) */ --wm-accent-text: #83a4f7; --wm-accent-fill-strong: rgba(29, 89, 240, 0.34); --wm-accent-secondary: var(--wm-brand-cyan); --wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%); --wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%); --wm-success: #32d074; --wm-success-fill: rgba(50, 208, 116, 0.16); --wm-warning: #e2a53d; --wm-warning-fill: rgba(226, 165, 61, 0.16); --wm-error: #ff8a80; --wm-error-fill: rgba(255, 138, 128, 0.12); /* SOLIDOS (mesmos do light): so eles recebem texto branco */ --wm-success-solid: #127a3a; --wm-warning-solid: #8f5d12; --wm-error-solid: #c62f25; --wm-info: #83a4f7; --wm-info-fill: rgba(131, 164, 247, 0.10); --wm-shadow-color: 220deg 30% 2%; --wm-shadow-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.08); --wm-shadow-1: 0 0.5px 1px hsl(var(--wm-shadow-color) / 0.3), 0 1px 3px hsl(var(--wm-shadow-color) / 0.3); --wm-shadow-2: 0 1px 2px hsl(var(--wm-shadow-color) / 0.3), 0 3px 10px hsl(var(--wm-shadow-color) / 0.36); --wm-shadow-3: 0 2px 6px hsl(var(--wm-shadow-color) / 0.3), 0 14px 36px -8px hsl(var(--wm-shadow-color) / 0.5); --wm-shadow-4: 0 2px 8px hsl(var(--wm-shadow-color) / 0.35), 0 24px 64px -12px hsl(var(--wm-shadow-color) / 0.6); --wm-shadow-panel: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -6px rgba(0, 0, 0, 0.5); --wm-shadow-floating: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 36px -8px rgba(0, 0, 0, 0.55); --wm-shadow-window: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.5), 0 24px 64px -12px rgba(0, 0, 0, 0.65); --wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09); --wm-material-sidebar-bg: rgba(28, 28, 32, 0.6); --wm-material-toolbar-bg: rgba(34, 34, 38, 0.6); --wm-material-popover-bg: rgba(40, 40, 44, 0.72); --wm-material-sheet-bg: rgba(34, 34, 38, 0.84); --wm-material-hud-bg: rgba(18, 18, 20, 0.78); --wm-material-hud-label: #ffffff; --wm-material-glass-border: rgba(255, 255, 255, 0.14); --wm-material-blur: 40px; --wm-material-blur-strong: 44px; --wm-material-blur-heavy: 56px; --wm-material-saturate: 1.8; --wm-material-saturate-strong: 1.8; --wm-material-saturate-heavy: 1.9; --wm-control-face-top: #58585f; --wm-control-face-bottom: #4b4b51; --wm-control-face-top-hover: #616168; --wm-control-face-bottom-hover: #55555c; --wm-control-face-top-pressed: #414147; --wm-control-face-bottom-pressed: #3b3b41; --wm-control-thumb-top: #ffffff; --wm-control-thumb-bottom: #f4f4f2; --wm-control-thumb-disabled: #77777d; --wm-scrollbar-thumb: rgba(255, 255, 255, 0.22); --wm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34); --wm-selection-bg: rgba(29, 89, 240, 0.32); /* Séries de gráfico — paridade exata com [data-theme="dark"]. */ --wm-chart-1: #4a80f0; --wm-chart-2: #d95926; --wm-chart-3: #199e70; --wm-chart-4: #c98500; --wm-chart-5: #d55181; --wm-chart-6: #008300; --wm-msg-user-top: #4f88ff; --wm-brand-loader-ink: rgba(255, 255, 255, 0.92); --wm-brand-loader-glow: #5a90ff; --wm-code-keyword: #83a4f7; --wm-code-string: #32d074; --wm-code-number: #e2a53d; --wm-code-comment: #999999; --wm-code-function: #b083f0; --wm-code-type: #39c5bb; } } } /* ============================================================ IA — cores semânticas da categoria de interface generativa. Estes tokens são ALIASES: apontam para os semânticos acima, que já trocam sozinhos entre light e dark. Por isso vivem num bloco neutro (sem data-theme) — o var() resolve no momento do uso, com o valor que o tema corrente deu ao token de origem. Existem para que ai-stream, ai-thinking, ai-toolcall, ai-citation, ai-prompt-suggest, ai-feedback, ai-diff e ai-agent-status falem "adicionado", "removido", "gerado por IA" — e não "verde", "vermelho". ============================================================ */ @layer tokens { :root { /* Assinatura de conteúdo gerado: faixa e brilho da marca */ --wm-ai-strip: var(--wm-brand-gradient); --wm-ai-glyph-bg: var(--wm-accent-fill); --wm-ai-glyph-fg: var(--wm-accent-text); /* Estados de execução (ferramenta, agente, tarefa da fila) */ --wm-ai-running: var(--wm-accent-text); --wm-ai-running-fill: var(--wm-accent-fill); --wm-ai-ok: var(--wm-success); --wm-ai-ok-fill: var(--wm-success-fill); --wm-ai-failed: var(--wm-error); --wm-ai-failed-fill: var(--wm-error-fill); --wm-ai-pending: var(--wm-label-tertiary); --wm-ai-pending-fill: var(--wm-fill-tertiary); /* Diff — linha inteira (tint suave) e realce por palavra (mais forte, sobre o tint da linha). O color-mix parte SEMPRE de um token; nenhum matiz nasce aqui. */ --wm-ai-diff-add-fill: var(--wm-success-fill); --wm-ai-diff-add-mark: var(--wm-success); --wm-ai-diff-add-word: color-mix(in srgb, var(--wm-success) 28%, transparent); --wm-ai-diff-del-fill: var(--wm-error-fill); --wm-ai-diff-del-mark: var(--wm-error); --wm-ai-diff-del-word: color-mix(in srgb, var(--wm-error) 28%, transparent); --wm-ai-diff-gutter-bg: var(--wm-fill-quaternary); /* Citação — marcador, cartão da fonte e trecho destacado */ --wm-ai-cite-fill: var(--wm-accent-fill); --wm-ai-cite-fg: var(--wm-accent-text); --wm-ai-cite-quote-fill: color-mix(in srgb, var(--wm-accent) 14%, transparent); --wm-ai-cite-unverified: var(--wm-warning); --wm-ai-cite-unverified-fill: var(--wm-warning-fill); /* Feedback — polegar marcado */ --wm-ai-feedback-up: var(--wm-success); --wm-ai-feedback-up-fill: var(--wm-success-fill); --wm-ai-feedback-down: var(--wm-error); --wm-ai-feedback-down-fill: var(--wm-error-fill); } } /* ============================================================ EDITOR DE IMAGEM — a paleta do palco (img-*). Um editor não é uma tela de app: quem manda no contraste é a IMAGEM. Por isso o chrome do editor é ESCURO POR PADRÃO nos dois temas — painéis em cinza-chumbo, a tela mais escura ainda, para a foto ser a coisa mais clara da janela. Quem quiser seguir a aparência do sistema opta explicitamente: `data-wm-editor-appearance="light"` no elemento (ou num ancestral) troca todo o conjunto por um chrome claro fotográfico, com a tela num cinza médio — nunca branco, senão a foto "some" no fundo. Os componentes img-* consomem SÓ estes tokens (nunca --wm-label-* nem --wm-surface-*): assim funcionam iguais numa página clara ou escura, que é como um editor de verdade se comporta. ============================================================ */ @layer tokens { :root { /* --- Superfícies do chrome --- */ --wm-img-canvas-bg: #101012; --wm-img-canvas-bg-2: #17171a; --wm-img-panel: #232326; --wm-img-panel-raised: #2b2b2f; --wm-img-panel-sunken: #1a1a1c; --wm-img-separator: rgba(255, 255, 255, 0.08); --wm-img-separator-strong: rgba(255, 255, 255, 0.16); /* --- Texto (medido sobre --wm-img-panel) --- */ --wm-img-label: rgba(255, 255, 255, 0.92); /* 13.3:1 */ --wm-img-label-2: rgba(255, 255, 255, 0.68); /* 7.9:1 */ --wm-img-label-3: rgba(255, 255, 255, 0.5); /* 4.9:1 */ /* --- Preenchimentos e controles --- */ --wm-img-fill: rgba(255, 255, 255, 0.07); --wm-img-fill-hover: rgba(255, 255, 255, 0.12); --wm-img-fill-strong: rgba(255, 255, 255, 0.18); --wm-img-control-bg: rgba(255, 255, 255, 0.06); --wm-img-control-active: rgba(255, 255, 255, 0.16); --wm-img-track: rgba(255, 255, 255, 0.14); --wm-img-track-fill: var(--wm-img-accent); --wm-img-thumb: #ffffff; --wm-img-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.4); --wm-img-tick: rgba(255, 255, 255, 0.34); --wm-img-tick-strong: rgba(255, 255, 255, 0.62); /* Accent do editor: o azul do kit clareado para viver em painel chumbo (4.85:1 sobre --wm-img-panel). */ --wm-img-accent: #4a8cff; --wm-img-accent-fill: rgba(74, 140, 255, 0.22); --wm-img-accent-strong: #2f76f5; /* --- Marcas sobre a IMAGEM (não sobre o chrome) --- */ --wm-img-handle: #ffffff; --wm-img-handle-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45); --wm-img-grid: rgba(255, 255, 255, 0.45); --wm-img-grid-shadow: rgba(0, 0, 0, 0.3); --wm-img-guide: var(--wm-brand-cyan); --wm-img-scrim: rgba(0, 0, 0, 0.55); --wm-img-marquee-a: rgba(255, 255, 255, 0.95); --wm-img-marquee-b: rgba(0, 0, 0, 0.65); /* Xadrez de transparência — sutil, nunca berrante */ --wm-img-checker-a: #2e2e31; --wm-img-checker-b: #26262a; /* Sombra da foto sobre a tela + vinheta das bordas da tela */ --wm-img-canvas-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.09), 0 12px 32px -8px rgba(0, 0, 0, 0.7); --wm-img-canvas-vignette: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.35) 100%); /* HUD (balão de valor durante o arrasto) — escuro nas duas aparências, igual ao HUD do macOS. */ --wm-img-hud-bg: rgba(20, 20, 22, 0.88); --wm-img-hud-label: #ffffff; --wm-img-hud-border: rgba(255, 255, 255, 0.14); /* Histograma / curvas — canais em blend de tela */ --wm-img-hist-r: rgba(255, 69, 58, 0.62); --wm-img-hist-g: rgba(50, 208, 116, 0.62); --wm-img-hist-b: rgba(74, 140, 255, 0.68); --wm-img-hist-luma: rgba(255, 255, 255, 0.5); --wm-img-hist-bg: rgba(0, 0, 0, 0.32); --wm-img-hist-clip: #ff453a; /* ---------------------------------------------------------- EIXOS FÍSICOS DO BALANÇO DE BRANCO Estes NÃO são cores de tema, e por isso não têm versão clara nem escura: são a grandeza medida. Temperatura de cor vai de ~2700K (âmbar de lâmpada) a ~9000K (azul de sombra ao ar livre); o tint corre no eixo verde↔magenta. Nunca aponte para --wm-accent nem para --wm-success. Já cometi esse erro: usei o azul da marca como "luz fria" e o verde de sucesso como "verde do tint". Se o Will trocar o accent — e ele trocou duas vezes hoje — o controle de temperatura mudaria de SIGNIFICADO sozinho. ---------------------------------------------------------- */ --wm-img-temp-frio: #3f7fd4; /* ~9000K, sombra ao ar livre */ --wm-img-temp-neutro: #f4f2ee; /* ~5500K, luz do dia — o ponto sem correção */ --wm-img-temp-quente: #ff9b2f; /* ~2700K, incandescente */ --wm-img-tint-verde: #47b95f; --wm-img-tint-neutro: #cfcfcf; --wm-img-tint-magenta: #cc5fc4; /* A roda de matiz. Também é grandeza física — são as matizes reais, na ordem do círculo cromático, começando e terminando no vermelho para a volta fechar. Fica como token para poder ser trocada (um espectro em P3, por exemplo) sem tocar no componente. */ --wm-img-slider-spectrum: linear-gradient( 90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); } /* ------------------------------------------------------------ PONTE DO CHROME — data-wm-img-chrome Os componentes img-* consomem só --wm-img-*, e por isso ficam certos em qualquer página. Mas um painel de editor quase sempre ABRIGA componentes normais do kit: um wm-toggle ligando o ajuste, um wm-button de "Reiniciar", um wm-text-field de valor. Esses leem --wm-label-*, --wm-fill-*, --wm-surface-* — e numa página CLARA chegariam com a paleta clara dentro de um painel chumbo. Texto preto sobre cinza escuro. Este bloco reaponta os semânticos para os do editor dentro do escopo marcado. Ponha data-wm-img-chrome na raiz de qualquer superfície de editor e o que estiver dentro se comporta. ------------------------------------------------------------ */ [data-wm-img-chrome] { --wm-label-primary: var(--wm-img-label); --wm-label-secondary: var(--wm-img-label-2); --wm-label-tertiary: var(--wm-img-label-3); --wm-label-quaternary: var(--wm-img-label-3); --wm-fill-primary: var(--wm-img-fill-strong); --wm-fill-secondary: var(--wm-img-fill-hover); --wm-fill-tertiary: var(--wm-img-fill); --wm-fill-quaternary: var(--wm-img-fill); --wm-surface-primary: var(--wm-img-panel-raised); --wm-surface-secondary: var(--wm-img-panel); --wm-surface-tertiary: var(--wm-img-panel-sunken); --wm-surface-elevated: var(--wm-img-panel-raised); --wm-surface-sunken: var(--wm-img-panel-sunken); --wm-separator: var(--wm-img-separator); --wm-separator-strong: var(--wm-img-separator-strong); --wm-accent: var(--wm-img-accent); --wm-accent-hover: var(--wm-img-accent-strong); --wm-accent-pressed: var(--wm-img-accent-strong); --wm-accent-fill: var(--wm-img-accent-fill); --wm-accent-text: var(--wm-img-accent); /* Face física de botão e polegar dentro do chrome escuro */ --wm-control-face-top: var(--wm-img-fill-hover); --wm-control-face-bottom: var(--wm-img-fill); --wm-control-face-top-hover: var(--wm-img-fill-strong); --wm-control-face-bottom-hover: var(--wm-img-fill-hover); --wm-control-face-top-pressed: var(--wm-img-fill); --wm-control-face-bottom-pressed: var(--wm-img-fill); } /* ------------------------------------------------------------ APARÊNCIA CLARA — opt-in explícito. Cinza fotográfico: painéis quase brancos, tela num cinza médio (nunca branco) para a foto não se dissolver no fundo. ------------------------------------------------------------ */ [data-wm-editor-appearance="light"] { --wm-img-canvas-bg: #b4b8be; --wm-img-canvas-bg-2: #c2c6cc; --wm-img-panel: #f2f3f5; --wm-img-panel-raised: #fafbfc; --wm-img-panel-sunken: #e5e7eb; --wm-img-separator: rgba(0, 0, 0, 0.1); --wm-img-separator-strong: rgba(0, 0, 0, 0.2); /* medidos sobre --wm-img-panel (#f2f3f5) */ --wm-img-label: rgba(0, 0, 0, 0.9); /* 14.6:1 */ --wm-img-label-2: rgba(0, 0, 0, 0.62); /* 6.0:1 */ --wm-img-label-3: rgba(0, 0, 0, 0.56); /* 4.8:1 */ --wm-img-fill: rgba(0, 10, 30, 0.06); --wm-img-fill-hover: rgba(0, 10, 30, 0.1); --wm-img-fill-strong: rgba(0, 10, 30, 0.16); --wm-img-control-bg: rgba(0, 10, 30, 0.05); --wm-img-control-active: rgba(0, 10, 30, 0.14); --wm-img-track: rgba(0, 10, 30, 0.14); --wm-img-thumb: #ffffff; --wm-img-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.16); --wm-img-tick: rgba(0, 0, 0, 0.3); --wm-img-tick-strong: rgba(0, 0, 0, 0.55); --wm-img-accent: var(--wm-accent); --wm-img-accent-fill: rgba(29, 89, 240, 0.14); --wm-img-accent-strong: var(--wm-accent-pressed); --wm-img-scrim: rgba(0, 0, 0, 0.42); --wm-img-checker-a: #ffffff; --wm-img-checker-b: #e6e7eb; --wm-img-canvas-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 10px 26px -8px rgba(0, 0, 0, 0.35); --wm-img-canvas-vignette: radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.14) 100%); --wm-img-hist-r: rgba(214, 40, 30, 0.55); --wm-img-hist-g: rgba(18, 122, 58, 0.55); --wm-img-hist-b: rgba(29, 89, 240, 0.55); --wm-img-hist-luma: rgba(0, 0, 0, 0.42); --wm-img-hist-bg: rgba(0, 0, 0, 0.06); } } /* ============================================================ EDITOR DE VÍDEO — cor (frente midia-video) A superfície de um editor de vídeo é ESCURA NOS DOIS TEMAS, pela mesma razão que o material HUD do kit já é: cor de imagem só é julgável contra neutro escuro. O que muda entre light e dark é a ELEVAÇÃO — no tema claro o editor sobe um degrau (fica um pouco menos preto) para não virar um buraco no meio de uma página clara; no escuro ele afunda. Hierarquia obrigatória de profundidade, do mais claro ao mais escuro: panel-raised > panel > bg > timeline-bg A timeline é sempre o ponto mais fundo da tela. ============================================================ */ @layer tokens { :root, :root[data-theme="light"] { /* Superfícies do editor (tema claro: um degrau acima) */ --wm-vid-bg: #1e1e21; --wm-vid-panel: #2a2a2e; --wm-vid-panel-raised: #333338; --wm-vid-panel-sunken: #202024; --wm-vid-timeline-bg: #161619; --wm-vid-track-bg: #212125; --wm-vid-track-bg-alt: #1c1c20; --wm-vid-track-header-bg: #26262b; --wm-vid-ruler-bg: #232328; /* Linhas */ --wm-vid-hairline: rgba(255, 255, 255, 0.1); --wm-vid-separator: rgba(0, 0, 0, 0.45); --wm-vid-grid: rgba(255, 255, 255, 0.16); --wm-vid-grid-strong: rgba(255, 255, 255, 0.34); /* Preenchimentos de controle dentro do editor */ --wm-vid-fill: rgba(255, 255, 255, 0.08); --wm-vid-fill-hover: rgba(255, 255, 255, 0.14); --wm-vid-fill-active: rgba(255, 255, 255, 0.2); } :root[data-theme="dark"] { --wm-vid-bg: #131315; --wm-vid-panel: #232326; --wm-vid-panel-raised: #2c2c31; --wm-vid-panel-sunken: #191a1c; --wm-vid-timeline-bg: #0d0d0f; --wm-vid-track-bg: #191a1d; --wm-vid-track-bg-alt: #141417; --wm-vid-track-header-bg: #1e1e22; --wm-vid-ruler-bg: #1b1b1f; --wm-vid-hairline: rgba(255, 255, 255, 0.09); --wm-vid-separator: rgba(0, 0, 0, 0.6); --wm-vid-grid: rgba(255, 255, 255, 0.14); --wm-vid-grid-strong: rgba(255, 255, 255, 0.3); --wm-vid-fill: rgba(255, 255, 255, 0.07); --wm-vid-fill-hover: rgba(255, 255, 255, 0.13); --wm-vid-fill-active: rgba(255, 255, 255, 0.19); } /* Paridade com [data-theme="dark"] para quem não fixa tema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wm-vid-bg: #131315; --wm-vid-panel: #232326; --wm-vid-panel-raised: #2c2c31; --wm-vid-panel-sunken: #191a1c; --wm-vid-timeline-bg: #0d0d0f; --wm-vid-track-bg: #191a1d; --wm-vid-track-bg-alt: #141417; --wm-vid-track-header-bg: #1e1e22; --wm-vid-ruler-bg: #1b1b1f; --wm-vid-hairline: rgba(255, 255, 255, 0.09); --wm-vid-separator: rgba(0, 0, 0, 0.6); --wm-vid-grid: rgba(255, 255, 255, 0.14); --wm-vid-grid-strong: rgba(255, 255, 255, 0.3); --wm-vid-fill: rgba(255, 255, 255, 0.07); --wm-vid-fill-hover: rgba(255, 255, 255, 0.13); --wm-vid-fill-active: rgba(255, 255, 255, 0.19); } } /* O resto do editor não muda com o tema: texto claro sobre superfície escura, cor de clipe, forma de onda, agulha, scopes. Fica num bloco neutro para não duplicar três vezes o que é idêntico. */ :root { /* Texto do editor — SEMPRE claro (a superfície é escura nos dois temas). Medido sobre --wm-vid-panel #2a2a2e, o fundo mais claro onde texto aparece: label rgba(255,255,255,.93) → 14.2:1 label-secondary rgba(255,255,255,.62) → 6.1:1 label-tertiary rgba(255,255,255,.4) → 2.9:1 (só glifo/ícone decorativo, nunca texto) */ --wm-vid-label: rgba(255, 255, 255, 0.93); --wm-vid-label-secondary: rgba(255, 255, 255, 0.62); --wm-vid-label-tertiary: rgba(255, 255, 255, 0.4); --wm-vid-label-on-clip: rgba(255, 255, 255, 0.94); /* Viewer: o quadro é preto puro, a tarja de letterbox é preta chapada e a moldura fica quase invisível. */ --wm-vid-viewer-bg: #08080a; --wm-vid-letterbox: #000000; --wm-vid-viewer-edge: rgba(255, 255, 255, 0.08); /* Agulha. A de POSICIONAMENTO é clara (neutra); a de REPRODUÇÃO ao vivo é vermelha — e só ela. O skimmer é mais apagado. */ --wm-vid-playhead: #f2f3f7; --wm-vid-playhead-live: #ff453a; --wm-vid-playhead-glow: rgba(0, 0, 0, 0.55); --wm-vid-skimmer: rgba(255, 255, 255, 0.55); /* Guia magnética (snap) — amarelo, como no Final Cut */ --wm-vid-snap: #ffd60a; --wm-vid-snap-glow: rgba(255, 214, 10, 0.28); /* Seleção: ANEL de accent, nunca preenchimento chapado */ --wm-vid-selection: var(--wm-accent); --wm-vid-selection-ring: #6ea8ff; --wm-vid-selection-fill: rgba(110, 168, 255, 0.14); /* Intervalo (range) e pontos de entrada/saída */ --wm-vid-range-border: #ffd60a; --wm-vid-range-fill: rgba(255, 214, 10, 0.12); --wm-vid-in-out: #ffd60a; --wm-vid-outside-range: rgba(0, 0, 0, 0.5); /* Entrada depois da saída. O vid-inout-points não conserta esse estado calado: pinta o cruzamento e diz por escrito. */ --wm-vid-inout-erro: #ff453a; --wm-vid-inout-erro-fill: rgba(255, 69, 58, 0.24); /* Ferramentas */ --wm-vid-blade: #ff453a; --wm-vid-blade-guide: rgba(255, 69, 58, 0.55); --wm-vid-ripple: #ffd60a; --wm-vid-roll: #6ea8ff; /* Estados de trilha */ --wm-vid-armed: #ff453a; --wm-vid-armed-fill: rgba(255, 69, 58, 0.2); --wm-vid-muted: #ff9f0a; --wm-vid-solo: #ffd60a; --wm-vid-locked: rgba(255, 255, 255, 0.5); --wm-vid-disabled-veil: rgba(0, 0, 0, 0.42); /* Keyframes e curvas */ --wm-vid-keyframe: #f2f3f7; --wm-vid-keyframe-selected: #ffd60a; --wm-vid-curve: #6ea8ff; --wm-vid-curve-handle: rgba(110, 168, 255, 0.6); /* ------------------------------------------------------------ COR POR TIPO DE CLIPE. Cada tipo tem corpo (bg), faixa de tipo (accent) e aresta (edge). Contraste do texto --wm-vid-label-on-clip sobre cada corpo, medido: vídeo 9.1:1 · áudio 8.4:1 · título 9.7:1 · efeito 8.6:1 imagem 8.9:1 · gerador 9.4:1 — todos acima de 4.5:1. ------------------------------------------------------------ */ --wm-vid-clip-video-bg: #2c4a7a; --wm-vid-clip-video-accent: #6ea8ff; --wm-vid-clip-video-edge: rgba(110, 168, 255, 0.34); --wm-vid-clip-audio-bg: #1f5a43; --wm-vid-clip-audio-accent: #48c79a; --wm-vid-clip-audio-edge: rgba(72, 199, 154, 0.34); --wm-vid-clip-title-bg: #4a3a78; --wm-vid-clip-title-accent: #a58cf5; --wm-vid-clip-title-edge: rgba(165, 140, 245, 0.34); --wm-vid-clip-effect-bg: #6a4326; --wm-vid-clip-effect-accent: #f0a35e; --wm-vid-clip-effect-edge: rgba(240, 163, 94, 0.34); --wm-vid-clip-image-bg: #2a5a68; --wm-vid-clip-image-accent: #5fc8e0; --wm-vid-clip-image-edge: rgba(95, 200, 224, 0.34); --wm-vid-clip-generator-bg: #6a2a4d; --wm-vid-clip-generator-accent: #f07fb5; --wm-vid-clip-generator-edge: rgba(240, 127, 181, 0.34); /* Forma de onda: corpo de BAIXO contraste, pico mais claro. O terceiro token marca amostra estourada (acima de 0 dBFS). */ --wm-vid-wave-fill: rgba(255, 255, 255, 0.22); --wm-vid-wave-peak: rgba(255, 255, 255, 0.62); --wm-vid-wave-rms: rgba(255, 255, 255, 0.34); --wm-vid-wave-clip: #ff453a; --wm-vid-wave-baseline: rgba(255, 255, 255, 0.16); /* Marcadores — cor É semântica, não decoração */ --wm-vid-marker-standard: #4a9eff; --wm-vid-marker-todo: #ff453a; --wm-vid-marker-done: #32d074; --wm-vid-marker-chapter: #ff9f0a; /* Scopes (vetorscópio, forma de onda, histograma) */ --wm-vid-scope-bg: #08080a; --wm-vid-scope-graticule: rgba(255, 255, 255, 0.16); --wm-vid-scope-graticule-strong: rgba(255, 255, 255, 0.3); --wm-vid-scope-trace: rgba(180, 255, 214, 0.85); --wm-vid-scope-trace-r: rgba(255, 90, 82, 0.75); --wm-vid-scope-trace-g: rgba(80, 224, 130, 0.75); --wm-vid-scope-trace-b: rgba(90, 150, 255, 0.75); --wm-vid-scope-target: rgba(255, 214, 10, 0.7); /* Transições entre clipes */ --wm-vid-transition-bg: rgba(255, 255, 255, 0.14); --wm-vid-transition-accent: rgba(255, 255, 255, 0.72); } } /* ============================================================ FAIXAS (LANES) DO EDITOR — cor semântica A faixa se identifica pela COR, e a cor tem nome de papel, não de matiz: `--wm-lane-cena`, `--wm-lane-voz`. Partiu da paleta de 12 cores do editor VanceVideo, mas nenhum hex de lá entrou cru: cada corpo foi escurecido até passar 4.5:1 contra `--wm-vid-label-on-clip`, e cada matiz foi afastado do vizinho no círculo cromático para a faixa ser reconhecível de relance. Contraste medido do texto do clipe sobre cada corpo: cena 9.1:1 · elemento 9.7:1 · legenda 8.5:1 · marcador 8.6:1 movimento 9.4:1 · voz 8.4:1 · trilha 10.0:1 A trilha de fundo é de propósito NEUTRA (ardósia): ela é a cama do vídeo, não deve competir com as faixas de conteúdo. ============================================================ */ @layer tokens { :root { --wm-lane-cena: #6ea8ff; --wm-lane-cena-bg: #2c4a7a; --wm-lane-cena-edge: rgba(110, 168, 255, 0.34); --wm-lane-elemento: #a58cf5; --wm-lane-elemento-bg: #4a3a78; --wm-lane-elemento-edge: rgba(165, 140, 245, 0.34); --wm-lane-legenda: #5fc8e0; --wm-lane-legenda-bg: #235561; --wm-lane-legenda-edge: rgba(95, 200, 224, 0.34); --wm-lane-marcador: #f0a35e; --wm-lane-marcador-bg: #6a4326; --wm-lane-marcador-edge: rgba(240, 163, 94, 0.34); --wm-lane-movimento: #f07fb5; --wm-lane-movimento-bg: #6a2a4d; --wm-lane-movimento-edge: rgba(240, 127, 181, 0.34); --wm-lane-voz: #48c79a; --wm-lane-voz-bg: #1f5a43; --wm-lane-voz-edge: rgba(72, 199, 154, 0.34); --wm-lane-trilha: #9aa6b8; --wm-lane-trilha-bg: #3a4250; --wm-lane-trilha-edge: rgba(154, 166, 184, 0.34); /* Fantasma: o trecho CORTADO que continua visível para poder voltar. Não é "desabilitado" — é matéria removida. Por isso perde a cor (fica acromático) em vez de só perder opacidade. */ --wm-vid-ghost-bg: rgba(255, 255, 255, 0.05); --wm-vid-ghost-edge: rgba(255, 255, 255, 0.18); --wm-vid-ghost-label: rgba(255, 255, 255, 0.45); --wm-vid-ghost-hatch: rgba(255, 255, 255, 0.07); --wm-vid-ghost-restore: #6ea8ff; } } /* ============================================================ EDITOR DE ÁUDIO — cores da categoria "audio". Um DAW não é um app de conteúdo: é uma BANCADA. A superfície precisa ser mais funda que um painel comum para a forma de onda e os medidores brilharem em cima dela, e os controles precisam parecer peça física (gradiente vertical, brilho no topo, sombra de contato). Por que um bloco próprio, e não só aliases: a bancada é mais escura que --wm-surface-sunken nos DOIS temas. No claro ela é um console cinza-frio (Logic Pro em aparência clara); no escuro, grafite quase preto. Isso não se obtém remixando os tokens de conteúdo — precisa de valor. O bloco escuro também responde a .wm-demo-dark para que as bancadas escuras das páginas de variante recebam a paleta certa sem precisar tocar em demo.css. Faixas do medidor: verde até -6 dBFS, âmbar até -1, vermelho acima. Elas apontam para --wm-success-solid / --wm-warning-solid / --wm-error-solid — os únicos tokens que aguentam texto branco em cima e que não mudam de matiz entre os temas (um medidor precisa significar a MESMA coisa no claro e no escuro). ============================================================ */ @layer tokens { :root, :root[data-theme="light"] { /* ---------- Bancada ---------- */ --wm-aud-surface: #dcdfe6; --wm-aud-panel: #eaecf1; --wm-aud-panel-raised: #f4f5f8; --wm-aud-lane: #e5e8ee; --wm-aud-lane-alt: #dfe2e9; --wm-aud-rail: #d1d5dd; --wm-aud-grid: rgba(10, 20, 45, 0.1); --wm-aud-grid-strong: rgba(10, 20, 45, 0.22); --wm-aud-separator: rgba(10, 20, 45, 0.14); /* Entalhe: trilha de fader, canal de medidor, poço de gráfico */ --wm-aud-inset: #c6cad3; --wm-aud-inset-deep: #b9bec8; --wm-aud-inset-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); /* Peça física: face de knob, punho de fader, botão de transporte */ --wm-aud-face-top: #fdfdfe; --wm-aud-face-bottom: #e3e5eb; --wm-aud-face-top-hover: #ffffff; --wm-aud-face-bottom-hover: #eaecf1; --wm-aud-face-top-pressed: #d9dbe2; --wm-aud-face-bottom-pressed: #cfd2da; --wm-aud-face-edge: rgba(10, 20, 45, 0.24); --wm-aud-face-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.9); --wm-aud-face-contact: 0 1px 2px rgba(0, 0, 0, 0.22); /* ---------- Forma de onda ---------- O envelope de PICO é o tom claro (baixo contraste, dá o contorno); o núcleo RMS é denso e concentra a leitura. */ --wm-aud-wave-peak: rgba(16, 34, 74, 0.3); --wm-aud-wave-rms: rgba(16, 34, 74, 0.62); --wm-aud-wave-zero: rgba(16, 34, 74, 0.24); --wm-aud-wave-selected-peak: color-mix(in srgb, var(--wm-accent) 40%, transparent); --wm-aud-wave-selected-rms: var(--wm-accent); /* ---------- Região ---------- */ --wm-aud-clip-tint: var(--wm-accent); --wm-aud-clip-title-fg: #ffffff; --wm-aud-clip-select-ring: rgba(255, 255, 255, 0.92); --wm-aud-clip-body: rgba(255, 255, 255, 0.72); /* ---------- Cabeça de reprodução, seleção e ciclo ---------- */ --wm-aud-playhead: #16181d; --wm-aud-playhead-glow: rgba(0, 0, 0, 0.3); --wm-aud-selection: color-mix(in srgb, var(--wm-accent) 22%, transparent); --wm-aud-selection-edge: var(--wm-accent); --wm-aud-cycle: color-mix(in srgb, var(--wm-warning-solid) 55%, transparent); --wm-aud-marker: var(--wm-brand-blue-light); /* ---------- Medidor ---------- */ --wm-aud-meter-ok: var(--wm-success-solid); --wm-aud-meter-warn: var(--wm-warning-solid); --wm-aud-meter-clip: var(--wm-error-solid); --wm-aud-meter-off: rgba(10, 20, 45, 0.12); --wm-aud-meter-hold: rgba(255, 255, 255, 0.92); --wm-aud-meter-reduction: var(--wm-brand-cyan); /* ---------- Estados de trilha ---------- */ --wm-aud-rec: var(--wm-error-solid); --wm-aud-solo: var(--wm-warning-solid); --wm-aud-mute: var(--wm-accent); --wm-aud-monitor: var(--wm-success-solid); --wm-aud-on-state-fg: #ffffff; /* ---------- Visor LCD (timecode, BPM, contagem) ---------- O visor é escuro nos dois temas: é uma peça, não uma superfície de conteúdo. */ --wm-aud-lcd-bg: linear-gradient(180deg, #23262d 0%, #14161a 100%); --wm-aud-lcd-fg: #e9f0fb; --wm-aud-lcd-dim: rgba(233, 240, 251, 0.38); --wm-aud-lcd-accent: var(--wm-brand-cyan); --wm-aud-lcd-rec: #ff6b60; --wm-aud-lcd-edge: rgba(0, 0, 0, 0.5); /* ---------- Gráficos: EQ, compressor, espectro, automação ---------- */ --wm-aud-graph-bg: #cfd3db; --wm-aud-graph-grid: rgba(10, 20, 45, 0.12); --wm-aud-graph-axis: rgba(10, 20, 45, 0.3); --wm-aud-curve: var(--wm-accent); --wm-aud-curve-fill: color-mix(in srgb, var(--wm-accent) 18%, transparent); --wm-aud-spectrum: color-mix(in srgb, var(--wm-brand-cyan) 70%, transparent); --wm-aud-spectrum-hold: rgba(10, 20, 45, 0.4); --wm-aud-automation: var(--wm-accent); /* Bandas de EQ — seis matizes distinguíveis, todos já do sistema */ --wm-aud-band-1: var(--wm-brand-cyan); --wm-aud-band-2: var(--wm-brand-blue-light); --wm-aud-band-3: var(--wm-accent); --wm-aud-band-4: var(--wm-success-solid); --wm-aud-band-5: var(--wm-warning-solid); --wm-aud-band-6: var(--wm-error-solid); } :root[data-theme="dark"], .wm-demo-dark { --wm-aud-surface: #121216; --wm-aud-panel: #202025; --wm-aud-panel-raised: #2a2a30; --wm-aud-lane: #1a1a1f; --wm-aud-lane-alt: #16161a; --wm-aud-rail: #26262c; --wm-aud-grid: rgba(255, 255, 255, 0.09); --wm-aud-grid-strong: rgba(255, 255, 255, 0.2); --wm-aud-separator: rgba(255, 255, 255, 0.12); --wm-aud-inset: #0d0d10; --wm-aud-inset-deep: #08080a; --wm-aud-inset-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 0.5px rgba(255, 255, 255, 0.07); --wm-aud-face-top: #56565e; --wm-aud-face-bottom: #3d3d44; --wm-aud-face-top-hover: #5f5f68; --wm-aud-face-bottom-hover: #45454d; --wm-aud-face-top-pressed: #3a3a41; --wm-aud-face-bottom-pressed: #313137; --wm-aud-face-edge: rgba(0, 0, 0, 0.66); --wm-aud-face-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.16); --wm-aud-face-contact: 0 1px 2px rgba(0, 0, 0, 0.55); --wm-aud-wave-peak: rgba(186, 210, 255, 0.32); --wm-aud-wave-rms: rgba(200, 222, 255, 0.74); --wm-aud-wave-zero: rgba(200, 222, 255, 0.2); --wm-aud-wave-selected-peak: color-mix(in srgb, var(--wm-brand-cyan) 34%, transparent); --wm-aud-wave-selected-rms: var(--wm-brand-cyan); --wm-aud-clip-tint: var(--wm-accent); --wm-aud-clip-title-fg: #ffffff; --wm-aud-clip-select-ring: rgba(255, 255, 255, 0.92); --wm-aud-clip-body: rgba(0, 0, 0, 0.34); --wm-aud-playhead: #ffffff; --wm-aud-playhead-glow: rgba(255, 255, 255, 0.34); --wm-aud-selection: color-mix(in srgb, var(--wm-brand-cyan) 20%, transparent); --wm-aud-selection-edge: var(--wm-brand-cyan); --wm-aud-cycle: color-mix(in srgb, var(--wm-warning) 45%, transparent); --wm-aud-marker: var(--wm-brand-cyan); --wm-aud-meter-ok: var(--wm-success-solid); --wm-aud-meter-warn: var(--wm-warning-solid); --wm-aud-meter-clip: var(--wm-error-solid); --wm-aud-meter-off: rgba(255, 255, 255, 0.07); --wm-aud-meter-hold: rgba(255, 255, 255, 0.92); --wm-aud-meter-reduction: var(--wm-brand-cyan); --wm-aud-rec: var(--wm-error-solid); --wm-aud-solo: var(--wm-warning-solid); --wm-aud-mute: var(--wm-accent); --wm-aud-monitor: var(--wm-success-solid); --wm-aud-on-state-fg: #ffffff; --wm-aud-lcd-bg: linear-gradient(180deg, #1d2027 0%, #0e1013 100%); --wm-aud-lcd-fg: #e9f0fb; --wm-aud-lcd-dim: rgba(233, 240, 251, 0.38); --wm-aud-lcd-accent: var(--wm-brand-cyan); --wm-aud-lcd-rec: #ff6b60; --wm-aud-lcd-edge: rgba(0, 0, 0, 0.7); --wm-aud-graph-bg: #0f0f13; --wm-aud-graph-grid: rgba(255, 255, 255, 0.09); --wm-aud-graph-axis: rgba(255, 255, 255, 0.26); --wm-aud-curve: var(--wm-brand-cyan); --wm-aud-curve-fill: color-mix(in srgb, var(--wm-brand-cyan) 16%, transparent); --wm-aud-spectrum: color-mix(in srgb, var(--wm-brand-cyan) 66%, transparent); --wm-aud-spectrum-hold: rgba(255, 255, 255, 0.42); --wm-aud-automation: var(--wm-brand-cyan); --wm-aud-band-1: var(--wm-brand-cyan); --wm-aud-band-2: var(--wm-brand-blue-light); --wm-aud-band-3: #6f95ff; --wm-aud-band-4: var(--wm-success); --wm-aud-band-5: var(--wm-warning); --wm-aud-band-6: var(--wm-error); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wm-aud-surface: #121216; --wm-aud-panel: #202025; --wm-aud-panel-raised: #2a2a30; --wm-aud-lane: #1a1a1f; --wm-aud-lane-alt: #16161a; --wm-aud-rail: #26262c; --wm-aud-grid: rgba(255, 255, 255, 0.09); --wm-aud-grid-strong: rgba(255, 255, 255, 0.2); --wm-aud-separator: rgba(255, 255, 255, 0.12); --wm-aud-inset: #0d0d10; --wm-aud-inset-deep: #08080a; --wm-aud-inset-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 0.5px rgba(255, 255, 255, 0.07); --wm-aud-face-top: #56565e; --wm-aud-face-bottom: #3d3d44; --wm-aud-face-top-hover: #5f5f68; --wm-aud-face-bottom-hover: #45454d; --wm-aud-face-top-pressed: #3a3a41; --wm-aud-face-bottom-pressed: #313137; --wm-aud-face-edge: rgba(0, 0, 0, 0.66); --wm-aud-face-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.16); --wm-aud-face-contact: 0 1px 2px rgba(0, 0, 0, 0.55); --wm-aud-wave-peak: rgba(186, 210, 255, 0.32); --wm-aud-wave-rms: rgba(200, 222, 255, 0.74); --wm-aud-wave-zero: rgba(200, 222, 255, 0.2); --wm-aud-wave-selected-peak: color-mix(in srgb, var(--wm-brand-cyan) 34%, transparent); --wm-aud-wave-selected-rms: var(--wm-brand-cyan); --wm-aud-clip-tint: var(--wm-accent); --wm-aud-clip-title-fg: #ffffff; --wm-aud-clip-select-ring: rgba(255, 255, 255, 0.92); --wm-aud-clip-body: rgba(0, 0, 0, 0.34); --wm-aud-playhead: #ffffff; --wm-aud-playhead-glow: rgba(255, 255, 255, 0.34); --wm-aud-selection: color-mix(in srgb, var(--wm-brand-cyan) 20%, transparent); --wm-aud-selection-edge: var(--wm-brand-cyan); --wm-aud-cycle: color-mix(in srgb, var(--wm-warning) 45%, transparent); --wm-aud-marker: var(--wm-brand-cyan); --wm-aud-meter-ok: var(--wm-success-solid); --wm-aud-meter-warn: var(--wm-warning-solid); --wm-aud-meter-clip: var(--wm-error-solid); --wm-aud-meter-off: rgba(255, 255, 255, 0.07); --wm-aud-meter-hold: rgba(255, 255, 255, 0.92); --wm-aud-meter-reduction: var(--wm-brand-cyan); --wm-aud-rec: var(--wm-error-solid); --wm-aud-solo: var(--wm-warning-solid); --wm-aud-mute: var(--wm-accent); --wm-aud-monitor: var(--wm-success-solid); --wm-aud-on-state-fg: #ffffff; --wm-aud-lcd-bg: linear-gradient(180deg, #1d2027 0%, #0e1013 100%); --wm-aud-lcd-fg: #e9f0fb; --wm-aud-lcd-dim: rgba(233, 240, 251, 0.38); --wm-aud-lcd-accent: var(--wm-brand-cyan); --wm-aud-lcd-rec: #ff6b60; --wm-aud-lcd-edge: rgba(0, 0, 0, 0.7); --wm-aud-graph-bg: #0f0f13; --wm-aud-graph-grid: rgba(255, 255, 255, 0.09); --wm-aud-graph-axis: rgba(255, 255, 255, 0.26); --wm-aud-curve: var(--wm-brand-cyan); --wm-aud-curve-fill: color-mix(in srgb, var(--wm-brand-cyan) 16%, transparent); --wm-aud-spectrum: color-mix(in srgb, var(--wm-brand-cyan) 66%, transparent); --wm-aud-spectrum-hold: rgba(255, 255, 255, 0.42); --wm-aud-automation: var(--wm-brand-cyan); --wm-aud-band-1: var(--wm-brand-cyan); --wm-aud-band-2: var(--wm-brand-blue-light); --wm-aud-band-3: #6f95ff; --wm-aud-band-4: var(--wm-success); --wm-aud-band-5: var(--wm-warning); --wm-aud-band-6: var(--wm-error); } } } /* ============================================================ WIC — Wortic IA-Controlável (cor da presença) A cor da IA precisa ser DISTINTA da cor de seleção do humano: quem olha tem que saber se aquele anel é "eu selecionei" (accent) ou "a IA está mexendo" (ciano da marca). Se as duas fossem accent, a presença viraria ruído indistinguível. ============================================================ */ @layer tokens { :root { --wm-wic-agent: var(--wm-brand-cyan); --wm-wic-agent-fill: rgba(42, 194, 243, 0.16); --wm-wic-agent-halo: rgba(42, 194, 243, 0.34); --wm-wic-agent-ink: #08222b; /* Estados de data-wic-state */ --wm-wic-ocioso: var(--wm-label-tertiary); --wm-wic-propondo: var(--wm-warning); --wm-wic-propondo-fill: var(--wm-warning-fill); --wm-wic-agindo: var(--wm-wic-agent); --wm-wic-agindo-fill: var(--wm-wic-agent-fill); --wm-wic-concluido: var(--wm-success); --wm-wic-concluido-fill: var(--wm-success-fill); --wm-wic-falhou: var(--wm-error); --wm-wic-falhou-fill: var(--wm-error-fill); /* Narração e rastro sobre superfície escura de editor */ --wm-wic-narration-bg: rgba(8, 10, 14, 0.82); --wm-wic-narration-label: rgba(255, 255, 255, 0.93); --wm-wic-trail-line: rgba(255, 255, 255, 0.14); } } /* ============================================================ WIC — cromo da presença (autossuficiente) A camada de presença da IA aparece por cima de QUALQUER host: uma timeline escura, um formulário claro, uma tabela. Por isso ela não empresta token de superfície de ninguém — carrega o próprio cromo, de HUD: escuro nos dois temas, como o balão de valor do macOS. Assim `foundation/wic.css` não quebra quando outra frente redefine a paleta do editor dela. ============================================================ */ @layer tokens { :root { --wm-wic-chrome-fill: rgba(255, 255, 255, 0.08); --wm-wic-chrome-fill-hover: rgba(255, 255, 255, 0.14); --wm-wic-chrome-fill-active: rgba(255, 255, 255, 0.2); --wm-wic-chrome-hairline: rgba(255, 255, 255, 0.12); /* medidos sobre --wm-wic-narration-bg rgba(8,10,14,.82): 15.9:1 e 7.4:1 */ --wm-wic-chrome-label: rgba(255, 255, 255, 0.93); --wm-wic-chrome-label-2: rgba(255, 255, 255, 0.62); } } /* ============================================================ EDITOR DE VÍDEO — aparência clara (opt-in), tokens --wm-vid-* Por que os tokens de vídeo se chamam --wm-vid-* e não --wm-editor-*: três frentes (imagem, áudio e vídeo) chegaram ao mesmo namespace --wm-editor-* com significados diferentes, e num arquivo de CSS o último bloco vence — um editor apagava a paleta do outro. Cada frente de mídia precisa do próprio prefixo. Vídeo usa --wm-vid-*. Convenção compartilhada com as outras frentes de mídia: o chrome do editor é ESCURO por padrão nos dois temas (a cor de imagem só é julgável contra neutro escuro), e quem quiser seguir a aparência do sistema opta explicitamente por `data-wm-editor-appearance="light"`. Nesta aparência o corpo dos clipes clareia e o texto sobre ele inverte: --wm-vid-label-on-clip vira preto a 88%, medido acima de 10:1 em todos os sete corpos. O QUADRO nunca clareia — viewer, letterbox e scopes seguem pretos, porque são instrumento de medida, não superfície de interface. ============================================================ */ @layer tokens { [data-wm-editor-appearance="light"] { --wm-vid-bg: #d4d7dd; --wm-vid-panel: #eaebef; --wm-vid-panel-raised: #f6f7f9; --wm-vid-panel-sunken: #e0e2e7; --wm-vid-timeline-bg: #c9ccd3; --wm-vid-track-bg: #d9dbe1; --wm-vid-track-bg-alt: #d2d5dc; --wm-vid-track-header-bg: #e2e4e9; --wm-vid-ruler-bg: #e5e7eb; --wm-vid-hairline: rgba(0, 0, 0, 0.12); --wm-vid-separator: rgba(0, 0, 0, 0.16); --wm-vid-grid: rgba(0, 0, 0, 0.14); --wm-vid-grid-strong: rgba(0, 0, 0, 0.3); --wm-vid-fill: rgba(0, 10, 30, 0.06); --wm-vid-fill-hover: rgba(0, 10, 30, 0.11); --wm-vid-fill-active: rgba(0, 10, 30, 0.17); /* medidos sobre --wm-vid-panel #eaebef: 14.9:1 e 5.7:1 */ --wm-vid-label: rgba(0, 0, 0, 0.9); --wm-vid-label-secondary: rgba(0, 0, 0, 0.6); --wm-vid-label-tertiary: rgba(0, 0, 0, 0.4); --wm-vid-label-on-clip: rgba(0, 0, 0, 0.88); /* A agulha "clara" é, na verdade, a de ALTO contraste com o fundo: em aparência clara ela precisa escurecer para continuar visível. A de reprodução segue vermelha — vermelho significa "ao vivo" nas duas aparências. */ --wm-vid-playhead: #1c1c1f; --wm-vid-playhead-glow: rgba(255, 255, 255, 0.7); --wm-vid-skimmer: rgba(0, 0, 0, 0.5); --wm-vid-selection-ring: var(--wm-accent); --wm-vid-selection-fill: rgba(29, 89, 240, 0.12); --wm-vid-locked: rgba(0, 0, 0, 0.5); --wm-vid-disabled-veil: rgba(255, 255, 255, 0.45); --wm-vid-keyframe: #1c1c1f; --wm-vid-curve: var(--wm-accent); --wm-vid-curve-handle: rgba(29, 89, 240, 0.5); --wm-vid-clip-video-bg: #b9cff2; --wm-vid-clip-video-accent: #2f6fe0; --wm-vid-clip-video-edge: rgba(47, 111, 224, 0.4); --wm-vid-clip-audio-bg: #b6e3d1; --wm-vid-clip-audio-accent: #12805c; --wm-vid-clip-audio-edge: rgba(18, 128, 92, 0.4); --wm-vid-clip-title-bg: #cfc3f3; --wm-vid-clip-title-accent: #6244c4; --wm-vid-clip-title-edge: rgba(98, 68, 196, 0.4); --wm-vid-clip-effect-bg: #f3d8bd; --wm-vid-clip-effect-accent: #a4620f; --wm-vid-clip-effect-edge: rgba(164, 98, 15, 0.4); --wm-vid-clip-image-bg: #bde0ea; --wm-vid-clip-image-accent: #12708a; --wm-vid-clip-image-edge: rgba(18, 112, 138, 0.4); --wm-vid-clip-generator-bg: #f2c8dd; --wm-vid-clip-generator-accent: #a83069; --wm-vid-clip-generator-edge: rgba(168, 48, 105, 0.4); --wm-vid-wave-fill: rgba(16, 34, 74, 0.24); --wm-vid-wave-rms: rgba(16, 34, 74, 0.42); --wm-vid-wave-peak: rgba(16, 34, 74, 0.62); --wm-vid-wave-baseline: rgba(16, 34, 74, 0.18); --wm-vid-transition-bg: rgba(0, 0, 0, 0.12); --wm-vid-transition-accent: rgba(0, 0, 0, 0.6); --wm-vid-ghost-bg: rgba(0, 0, 0, 0.05); --wm-vid-ghost-edge: rgba(0, 0, 0, 0.2); --wm-vid-ghost-label: rgba(0, 0, 0, 0.45); --wm-vid-ghost-hatch: rgba(0, 0, 0, 0.06); /* Faixas na aparência clara: corpo claro, identidade mais saturada. */ --wm-lane-cena: #2f6fe0; --wm-lane-cena-bg: #b9cff2; --wm-lane-cena-edge: rgba(47, 111, 224, 0.4); --wm-lane-elemento: #6244c4; --wm-lane-elemento-bg: #cfc3f3; --wm-lane-elemento-edge: rgba(98, 68, 196, 0.4); --wm-lane-legenda: #12708a; --wm-lane-legenda-bg: #bde0ea; --wm-lane-legenda-edge: rgba(18, 112, 138, 0.4); --wm-lane-marcador: #a4620f; --wm-lane-marcador-bg: #f3d8bd; --wm-lane-marcador-edge: rgba(164, 98, 15, 0.4); --wm-lane-movimento: #a83069; --wm-lane-movimento-bg: #f2c8dd; --wm-lane-movimento-edge: rgba(168, 48, 105, 0.4); --wm-lane-voz: #12805c; --wm-lane-voz-bg: #b6e3d1; --wm-lane-voz-edge: rgba(18, 128, 92, 0.4); --wm-lane-trilha: #55606f; --wm-lane-trilha-bg: #ccd2dc; --wm-lane-trilha-edge: rgba(85, 96, 111, 0.4); } } /* ============================================================ EDITOR DE VÍDEO — cor das FAIXAS e do que vive nelas (frente midia-video, sub-frente vid-trilhas). Completa o bloco --wm-vid-* de cima com o que faltava para os cabeçalhos de faixa, o fantasma e a estatística de edição. Vem por APPEND porque três agentes escrevem neste arquivo agora. Ordem importa: o :root abaixo traz os valores da aparência ESCURA (o padrão do chrome de editor nos dois temas) e, logo em seguida, o bloco [data-wm-editor-appearance="light"] refaz os que não sobrevivem a um fundo claro. Amarelo de solo sobre #eaebef daria 1.7:1 — por isso o solo claro escurece para ocre (#8a6d00, 5.3:1) em vez de só perder opacidade. ============================================================ */ @layer tokens { :root { /* Preenchimentos dos estados de faixa. O CONTORNO carrega a cor e o preenchimento é discreto: sete faixas com botão aceso não podem virar árvore de natal. */ --wm-vid-muted-fill: rgba(255, 159, 10, 0.2); --wm-vid-solo-fill: rgba(255, 214, 10, 0.2); --wm-vid-locked-fill: rgba(255, 255, 255, 0.12); /* Véu sob o nome da faixa, para o texto sobreviver ao pico da onda passando por baixo. Medido: label 0.93 sobre a onda mais clara + véu dá 8.9:1. */ --wm-vid-track-scrim: rgba(0, 0, 0, 0.5); /* Fantasma — "Ligar de volta" é convite, não alerta: fundo suave e texto na própria cor de restauro. */ --wm-vid-ghost-restore-fill: rgba(110, 168, 255, 0.16); --wm-vid-ghost-restore-fill-hover: rgba(110, 168, 255, 0.28); /* Estatística de edição: o que FICOU e o que SAIU. Verde é o corte final, âmbar é o material removido — âmbar e não vermelho, porque cortar não é erro. */ --wm-vid-stats-kept: #48c79a; --wm-vid-stats-removed: #ff9f0a; --wm-vid-stats-bar-bg: rgba(255, 255, 255, 0.1); } } @layer tokens { [data-wm-editor-appearance="light"] { /* Os estados de faixa precisam escurecer: os tons de sinal do modo escuro (#ff453a, #ff9f0a, #ffd60a) não passam de 2:1 contra --wm-vid-panel #eaebef. Medidos aqui: armado 5.9:1, mudo 4.6:1, solo 5.3:1. */ --wm-vid-armed: #c00011; --wm-vid-armed-fill: rgba(192, 0, 17, 0.14); --wm-vid-muted: #995400; --wm-vid-muted-fill: rgba(153, 84, 0, 0.14); --wm-vid-solo: #8a6d00; --wm-vid-solo-fill: rgba(138, 109, 0, 0.16); --wm-vid-locked-fill: rgba(0, 0, 0, 0.08); /* Amostra estourada continua vermelha — vermelho é "estourou" nas duas aparências —, só escurece para ficar legível. */ --wm-vid-wave-clip: #c00011; /* Véu invertido: em fundo claro o que protege o texto é branco. */ --wm-vid-track-scrim: rgba(255, 255, 255, 0.62); --wm-vid-ghost-restore: var(--wm-accent); --wm-vid-ghost-restore-fill: rgba(29, 89, 240, 0.12); --wm-vid-ghost-restore-fill-hover: rgba(29, 89, 240, 0.22); --wm-vid-stats-kept: #12805c; --wm-vid-stats-removed: #995400; --wm-vid-stats-bar-bg: rgba(0, 0, 0, 0.12); } } /* ============================================================ VÍDEO — cor do visualizador, do transporte, da raspagem e do marcador (frente vid-viewer). Regra que não se negocia: o QUADRO e o LETTERBOX nunca clareiam. --wm-vid-viewer-bg e --wm-vid-letterbox ficam fora do bloco [data-wm-editor-appearance="light"] de propósito — o viewer é instrumento de julgamento de imagem, e cor só é julgável contra preto. O resto do chrome (transporte, campo de timecode) acompanha a aparência clara quando ela é pedida. ============================================================ */ @layer tokens { :root { /* Estado LIGADO de um controle do editor (loop ativo, guia ligada). Azul do editor, não o accent do sistema: sobre --wm-vid-panel #2a2a2e o #6ea8ff dá 6.6:1. */ --wm-vid-toggle-on: #6ea8ff; --wm-vid-toggle-on-fill: rgba(110, 168, 255, 0.16); /* Raspagem: trilho, buffer (o que já carregou) e o preenchido. */ --wm-vid-scrubber-track: rgba(255, 255, 255, 0.16); --wm-vid-scrubber-buffer: rgba(255, 255, 255, 0.3); --wm-vid-scrubber-fill: rgba(255, 255, 255, 0.92); --wm-vid-scrubber-thumb-color: #f2f3f7; --wm-vid-scrub-preview-edge: rgba(255, 255, 255, 0.16); /* Guias de enquadramento sobre o quadro preto: brancas e fracas, para não competir com a imagem que está sendo julgada. */ --wm-vid-guide: rgba(255, 255, 255, 0.3); --wm-vid-guide-strong: rgba(255, 255, 255, 0.5); /* Campo de timecode: poço escuro, e o campo sob o cursor recebe um tint em vez de troca de cor de texto (número não pode mudar de peso visual quando é editado). */ --wm-vid-timecode-bg: rgba(0, 0, 0, 0.34); --wm-vid-timecode-segment-fill: rgba(110, 168, 255, 0.3); /* Marcador — o rótulo é chrome escuro com um filete da cor semântica; assim o texto nunca depende do contraste da cor do marcador. */ --wm-vid-marker-label-bg: rgba(20, 20, 24, 0.92); --wm-vid-marker-standard-fill: rgba(74, 158, 255, 0.2); --wm-vid-marker-todo-fill: rgba(255, 69, 58, 0.2); --wm-vid-marker-done-fill: rgba(50, 208, 116, 0.2); --wm-vid-marker-chapter-fill: rgba(255, 159, 10, 0.2); } /* Aparência clara opt-in: o chrome acompanha, o quadro NÃO. */ [data-wm-editor-appearance="light"] { --wm-vid-toggle-on: #1d59f0; --wm-vid-toggle-on-fill: rgba(29, 89, 240, 0.12); --wm-vid-scrubber-track: rgba(0, 10, 30, 0.18); --wm-vid-scrubber-buffer: rgba(0, 10, 30, 0.32); --wm-vid-scrubber-fill: rgba(16, 34, 74, 0.86); --wm-vid-scrubber-thumb-color: #1c1c1f; --wm-vid-scrub-preview-edge: rgba(0, 0, 0, 0.18); --wm-vid-timecode-bg: rgba(255, 255, 255, 0.72); --wm-vid-timecode-segment-fill: rgba(29, 89, 240, 0.22); --wm-vid-marker-label-bg: rgba(255, 255, 255, 0.94); --wm-vid-marker-standard: #1f6fd0; --wm-vid-marker-todo: #cc2f26; --wm-vid-marker-done: #12805c; --wm-vid-marker-chapter: #a4620f; --wm-vid-marker-standard-fill: rgba(31, 111, 208, 0.16); --wm-vid-marker-todo-fill: rgba(204, 47, 38, 0.16); --wm-vid-marker-done-fill: rgba(18, 128, 92, 0.16); --wm-vid-marker-chapter-fill: rgba(164, 98, 15, 0.16); } } /* ============================================================ EDITOR DE VÍDEO — cor das sobreposições no quadro e dos painéis (frente midia-video, sub-frente vid-overlays) Regra que manda aqui: SOBRE O QUADRO a cor NÃO segue tema nem aparência. Uma alça de escala pousa sobre pele, céu, letreiro branco ou noite fechada — se ela mudar de cor com o tema, some em metade dos quadros. Por isso a alça é branca com CONTORNO PRETO (--wm-vid-handle + --wm-vid-handle-shadow): o par claro-sobre-escuro sobrevive a qualquer fundo, e é o mesmo truque do cursor do sistema. Consequência: nada do bloco "sobre o quadro" abaixo é redefinido em [data-wm-editor-appearance="light"]. Só o chrome (inspetor, curva, zoom) clareia. Contraste medido: alça branca 0.98 sobre veil preto 0.55 dá >12:1; sobre quadro branco puro o contorno preto 0.75 garante 4.6:1 na borda de 1px — o que a torna visível sem engrossar. ============================================================ */ @layer tokens { :root { /* ---- Sobre o quadro: alças, caixa e guias (não seguem tema) ---- */ --wm-vid-handle: rgba(255, 255, 255, 0.98); --wm-vid-handle-shadow: rgba(0, 0, 0, 0.75); --wm-vid-handle-hover: rgba(255, 255, 255, 1); --wm-vid-handle-active: #ffd60a; --wm-vid-handle-ia: #5ee7e0; --wm-vid-overlay-box: rgba(255, 255, 255, 0.88); --wm-vid-overlay-box-shadow: rgba(0, 0, 0, 0.62); --wm-vid-overlay-guide: rgba(255, 255, 255, 0.34); --wm-vid-overlay-guide-strong: rgba(255, 255, 255, 0.58); --wm-vid-overlay-veil: rgba(0, 0, 0, 0.58); --wm-vid-overlay-veil-soft: rgba(0, 0, 0, 0.38); --wm-vid-overlay-arm: rgba(255, 255, 255, 0.82); --wm-vid-overlay-center: rgba(255, 255, 255, 0.72); --wm-vid-overlay-safe: rgba(255, 214, 10, 0.5); /* HUD de valor flutuando sobre o quadro */ --wm-vid-overlay-hud-bg: rgba(0, 0, 0, 0.68); --wm-vid-overlay-hud-label: rgba(255, 255, 255, 0.96); --wm-vid-overlay-hud-hairline: rgba(255, 255, 255, 0.18); /* Segunda linha do HUD (unidade, nota, rótulo de aba não escolhida). Medido sobre --wm-vid-overlay-hud-bg composto no pior caso (véu sobre branco puro): 5.0:1. Fica ACIMA do 4.5 mesmo em 11px. */ --wm-vid-overlay-hud-label-2: rgba(255, 255, 255, 0.72); /* ---- vid-crop-overlay ---- O véu de fora é mais escuro que --wm-vid-overlay-veil de propósito: no transform o que está fora continua no vídeo; aqui ele vai ser JOGADO FORA, e a diferença entre "fica" e "sai" precisa ser óbvia num relance. Fixo nas duas aparências — é imagem por baixo, não cromo. */ --wm-vid-crop-scrim: rgba(0, 0, 0, 0.66); --wm-vid-crop-ratio-hover: rgba(255, 255, 255, 0.14); --wm-vid-crop-ratio-ativo: rgba(255, 255, 255, 0.92); --wm-vid-crop-ratio-ativo-ink: #14161a; /* Aviso de que ampliar mais vai esticar pixel. Âmbar, e sempre acompanhado de texto — cor nunca carrega o significado sozinha. Medido sobre o HUD: 8.9:1. */ --wm-vid-crop-alerta: #ffb340; /* ---- Chrome: inspetor, curva e zoom (seguem a aparência) ---- */ --wm-vid-inspector-bg: var(--wm-vid-panel); --wm-vid-inspector-tabs-bg: var(--wm-vid-panel-sunken); --wm-vid-inspector-group-label: rgba(255, 255, 255, 0.5); --wm-vid-inspector-field-bg: rgba(255, 255, 255, 0.08); --wm-vid-inspector-field-bg-hover: rgba(255, 255, 255, 0.13); --wm-vid-inspector-field-edge: rgba(255, 255, 255, 0.12); --wm-vid-inspector-scrub-hint: rgba(255, 255, 255, 0.3); --wm-vid-inspector-modified: #ff9f0a; --wm-vid-curve-bg: var(--wm-vid-panel-sunken); --wm-vid-curve-grid: rgba(255, 255, 255, 0.09); --wm-vid-curve-grid-strong: rgba(255, 255, 255, 0.18); --wm-vid-curve-ghost: rgba(255, 255, 255, 0.22); --wm-vid-keyframe-ring: rgba(0, 0, 0, 0.7); --wm-vid-keyframe-hold: #f0a35e; --wm-vid-keyframe-linear: #9aa6b8; --wm-vid-zoom-track: rgba(255, 255, 255, 0.16); --wm-vid-zoom-fill: #6ea8ff; --wm-vid-zoom-thumb-bg: #f2f3f7; --wm-vid-zoom-thumb-shadow: rgba(0, 0, 0, 0.5); --wm-vid-zoom-notch: rgba(255, 255, 255, 0.28); --wm-vid-zoom-notch-ativo: rgba(255, 255, 255, 0.75); } } /* ============================================================ Aparência clara opt-in — só o CHROME. O quadro não clareia: as alças e o veil de recorte continuam brancos com contorno preto, porque quem manda no contraste ali é a imagem. ============================================================ */ @layer tokens { [data-wm-editor-appearance="light"] { /* Achado ao fechar o vid-inspector: --wm-vid-inspector-bg e --wm-vid-inspector-tabs-bg indireciam para --wm-vid-panel(-sunken), mas como a indireção foi declarada só em :root (linha ~1695), o valor fica congelado no escuro — CSS custom properties resolvem var() no elemento ONDE a propriedade foi declarada, não em cada consumidor. Sem redeclarar aqui, o painel nunca clareava, mesmo com o comentário acima dizendo "seguem a aparência". Mesmo raciocínio vale para --wm-vid-curve-bg (vid-keyframe-editor). */ --wm-vid-inspector-bg: var(--wm-vid-panel); --wm-vid-inspector-tabs-bg: var(--wm-vid-panel-sunken); --wm-vid-inspector-group-label: rgba(0, 0, 0, 0.5); --wm-vid-inspector-field-bg: rgba(0, 10, 30, 0.06); --wm-vid-inspector-field-bg-hover: rgba(0, 10, 30, 0.11); --wm-vid-inspector-field-edge: rgba(0, 0, 0, 0.14); --wm-vid-inspector-scrub-hint: rgba(0, 0, 0, 0.32); --wm-vid-inspector-modified: #a4620f; --wm-vid-curve-bg: var(--wm-vid-panel-sunken); --wm-vid-curve-grid: rgba(0, 0, 0, 0.1); --wm-vid-curve-grid-strong: rgba(0, 0, 0, 0.2); --wm-vid-curve-ghost: rgba(0, 0, 0, 0.24); --wm-vid-keyframe-ring: rgba(255, 255, 255, 0.8); --wm-vid-keyframe-hold: #a4620f; --wm-vid-keyframe-linear: #55606f; --wm-vid-zoom-track: rgba(0, 0, 0, 0.16); --wm-vid-zoom-fill: var(--wm-accent); --wm-vid-zoom-thumb-bg: #ffffff; --wm-vid-zoom-thumb-shadow: rgba(0, 0, 0, 0.28); --wm-vid-zoom-notch: rgba(0, 0, 0, 0.24); --wm-vid-zoom-notch-ativo: rgba(0, 0, 0, 0.62); } } /* ============================================================ EDITOR DE VÍDEO — FERRAMENTAS DE CORTE (cor) vid-trim-handles, vid-ripple, vid-roll, vid-blade, vid-snap-guide, vid-range-selection. Três decisões que valem para todas elas: 1. O HUD (quantos quadros entraram, quanto a lacuna encolheu, em que timecode a lâmina cai) é uma etiqueta que flutua SOBRE imagem em movimento. Ela não pode herdar o fundo do painel — precisa do próprio véu opaco, senão o número some no quadro claro. Daí --wm-vid-hud-*. 2. Cada ferramenta tem matiz fixa e não negociável, para o editor saber qual está armada sem ler rótulo: ripple = âmbar, roll = azul, lâmina = vermelho, ímã = amarelo. Os matizes já existem (--wm-vid-ripple, --wm-vid-roll, --wm-vid-blade, --wm-vid-snap); aqui entram só os preenchimentos derivados. 3. O cursor de lâmina é um SVG embutido, e ele PRECISA inverter entre o chrome escuro e a aparência clara — lâmina branca some em painel claro. Por isso o cursor inteiro (imagem + hotspot) é token, e o componente só escreve `cursor: var(...)`. Hotspot: 5 21 — a ponta do gume, canto inferior esquerdo, é o ponto exato onde o corte cai. ============================================================ */ @layer tokens { :root { /* HUD flutuante das ferramentas — véu próprio, não do painel. Contraste do rótulo sobre o véu: 13.6:1 */ --wm-vid-hud-bg: rgba(0, 0, 0, 0.74); --wm-vid-hud-label: rgba(255, 255, 255, 0.95); --wm-vid-hud-label-secondary: rgba(255, 255, 255, 0.66); --wm-vid-hud-hairline: rgba(255, 255, 255, 0.16); /* Trim — alça em repouso é clara e neutra; ao agarrar vira amarela, a mesma família do in/out. */ --wm-vid-trim-handle: #f2f3f7; --wm-vid-trim-handle-ink: rgba(0, 0, 0, 0.62); --wm-vid-trim-handle-active: #ffd60a; --wm-vid-trim-limit: #ff453a; --wm-vid-trim-limit-fill: rgba(255, 69, 58, 0.22); /* Ripple — a lacuna que vai fechar e a fita de deslocamento */ --wm-vid-ripple-fill: rgba(255, 214, 10, 0.14); --wm-vid-ripple-hatch-ink: rgba(255, 214, 10, 0.3); --wm-vid-ripple-shift-fill: rgba(255, 214, 10, 0.2); /* Roll — a junção que se move sem mudar a duração total */ --wm-vid-roll-fill: rgba(110, 168, 255, 0.16); --wm-vid-roll-ink: rgba(0, 0, 0, 0.68); /* Lâmina — cursor próprio, com o gume vermelho marcando o corte */ --wm-vid-blade-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 2.6 L13.4 5.6 L13.4 16.4 L5.6 20.9 Z' fill='rgb(242,243,247)' stroke='rgba(0,0,0,0.66)' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='8.5' y='8.6' width='2.4' height='6.2' rx='1.2' fill='rgba(0,0,0,0.5)'/%3E%3Cpath d='M5.6 2.6 L5.6 20.9' stroke='rgb(255,69,58)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 21, crosshair; /* Guia magnética — o amarelo já existe em --wm-vid-snap; aqui vem só o nó e o rótulo dela. */ --wm-vid-snap-node-ink: rgba(0, 0, 0, 0.7); /* Seleção de intervalo — a tampa das pontas e o véu do que está fora. O véu escurece; ele NÃO desatura, senão o editor julga cor errado no que sobrou. */ --wm-vid-range-cap-ink: rgba(0, 0, 0, 0.7); --wm-vid-range-ring: rgba(255, 214, 10, 0.34); } /* Aparência clara (opt-in) — o véu do HUD inverte, e a lâmina do cursor escurece para não sumir no painel claro. */ [data-wm-editor-appearance="light"] { --wm-vid-hud-bg: rgba(255, 255, 255, 0.9); --wm-vid-hud-label: rgba(0, 0, 0, 0.92); --wm-vid-hud-label-secondary: rgba(0, 0, 0, 0.62); --wm-vid-hud-hairline: rgba(0, 0, 0, 0.14); --wm-vid-trim-handle: #26262b; --wm-vid-trim-handle-ink: rgba(255, 255, 255, 0.8); --wm-vid-trim-handle-active: #a4620f; --wm-vid-trim-limit: #c62d22; --wm-vid-trim-limit-fill: rgba(198, 45, 34, 0.18); --wm-vid-ripple: #a4620f; --wm-vid-ripple-fill: rgba(164, 98, 15, 0.13); --wm-vid-ripple-hatch-ink: rgba(164, 98, 15, 0.28); --wm-vid-ripple-shift-fill: rgba(164, 98, 15, 0.18); --wm-vid-roll: #2f6fe0; --wm-vid-roll-fill: rgba(47, 111, 224, 0.14); --wm-vid-roll-ink: rgba(255, 255, 255, 0.9); --wm-vid-blade: #c62d22; --wm-vid-blade-guide: rgba(198, 45, 34, 0.6); --wm-vid-blade-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 2.6 L13.4 5.6 L13.4 16.4 L5.6 20.9 Z' fill='rgb(38,38,43)' stroke='rgba(255,255,255,0.82)' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='8.5' y='8.6' width='2.4' height='6.2' rx='1.2' fill='rgba(255,255,255,0.62)'/%3E%3Cpath d='M5.6 2.6 L5.6 20.9' stroke='rgb(198,45,34)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 21, crosshair; --wm-vid-snap: #a4620f; --wm-vid-snap-glow: rgba(164, 98, 15, 0.26); --wm-vid-snap-node-ink: rgba(255, 255, 255, 0.92); --wm-vid-range-border: #a4620f; --wm-vid-range-fill: rgba(164, 98, 15, 0.12); --wm-vid-range-ring: rgba(164, 98, 15, 0.3); /* FALTAVA. --wm-vid-in-out era declarado só no :root escuro, com o #ffd60a: sobre o trilho claro #d9dbe1 isso dá 1,26:1 — a bandeira de entrada e saída, que é o elemento MAIS importante da marcação, era a única coisa invisível na aparência clara. Mesmo âmbar do range-border, medido sobre o trilho: 3,53:1, acima do 3:1 que elemento de interface exige. */ --wm-vid-in-out: #a4620f; /* Cruzamento de entrada e saída — ver o comentário do topo de components/vid-inout-points/vid-inout-points.css. Vermelho de erro da aparência clara, o mesmo do vid-trim-limit. */ --wm-vid-inout-erro: #c62d22; --wm-vid-inout-erro-fill: rgba(198, 45, 34, 0.2); --wm-vid-range-cap-ink: rgba(255, 255, 255, 0.92); --wm-vid-outside-range: rgba(255, 255, 255, 0.55); } } /* ============================================================ CLIPE DE VÍDEO — véu de leitura sobre a miniatura O nome e a duração do clipe ficam POR CIMA da miniatura de entrada. Miniatura é foto: pode ser clara, escura ou clara e escura no mesmo quadro. Sem um véu, o texto some em metade do material. O véu é preto nas duas aparências — é ele que garante os 4.5:1 do nome do clipe independentemente da imagem embaixo. ============================================================ */ @layer tokens { :root { --wm-vid-clip-scrim: linear-gradient( 180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0) 100% ); --wm-vid-clip-scrim-label: rgba(255, 255, 255, 0.96); --wm-vid-clip-scrim-label-2: rgba(255, 255, 255, 0.74); /* Sombra de contato do clipe na faixa: dá espessura sem borda grossa */ --wm-vid-clip-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } } /* ============================================================ EDITOR DE VÍDEO — cor de EFEITO, TRANSIÇÃO, RODA e SCOPE (frente midia-video, sub-frente vid-cor-saida) Três decisões que valem explicação: 1. O SCOPE NÃO MUDA DE FUNDO. --wm-vid-scope-bg é preto nas duas aparências, e por isso o texto de dentro dele tem tokens próprios (--wm-vid-scope-label*) em vez de herdar --wm-vid-label, que inverte no opt-in claro. Instrumento de medida com fundo variável não mede nada: a mesma imagem pareceria mais clara só porque a UI mudou. 2. A RODA DE COR é gerada, não desenhada. O matiz é um conic-gradient em HSL puro e a saturação é um radial-gradient branco→transparente por cima. Ficam como token de GRADIENTE para o componente não carregar doze paradas de cor no corpo — e para quem quiser trocar o espaço de cor mexer num lugar só. Orientação: vermelho no topo, amarelo a 60°, verde a 120°, ciano embaixo, azul a 240°, magenta a 300° — o círculo de matiz, que é o que o colorista espera na roda. Ele NÃO é a mesma orientação do vetorscópio (lá o vermelho fica em 103°, por Rec.709): são dois instrumentos diferentes, e fingir que coincidem seria pior que a diferença. 3. Cor de estado aqui NÃO usa --wm-success/--wm-warning: esses invertem com o tema do site, e o chrome do editor é escuro nos dois. Um "aplicado" verde-escuro sobre painel preto some. ============================================================ */ @layer tokens { :root { /* ---------- vid-effects-browser ---------- O ladrilho é uma superfície ERGUIDA dentro do painel: fica um degrau acima para a pré-visualização parecer um monitorzinho. As três cores de pré-visualização compõem os gradientes das demonstrações abstratas (desfoque, brilho, granulado). */ --wm-vid-effect-tile-bg: rgba(255, 255, 255, 0.06); --wm-vid-effect-tile-bg-hover: rgba(255, 255, 255, 0.12); --wm-vid-effect-preview-bg: #0e1016; --wm-vid-effect-preview-a: #2f6fe0; --wm-vid-effect-preview-b: #f07fb5; --wm-vid-effect-preview-c: #ffd60a; --wm-vid-effect-preview-veil: rgba(0, 0, 0, 0.55); /* Estado: favorito (estrela) e já aplicado ao clipe. Fixos nas duas aparências — o ladrilho é sempre escuro por dentro. */ --wm-vid-effect-favorite: #ffd60a; --wm-vid-effect-applied: #32d074; --wm-vid-effect-applied-fill: rgba(50, 208, 116, 0.18); --wm-vid-effect-gpu: #f0a35e; /* ---------- vid-transitions-strip ---------- --wm-vid-transition-bg e --wm-vid-transition-accent já existem no bloco de vídeo; aqui entram borda, hover, seleção e alça. */ --wm-vid-transition-edge: rgba(255, 255, 255, 0.28); --wm-vid-transition-hover: rgba(255, 255, 255, 0.22); --wm-vid-transition-glyph: rgba(255, 255, 255, 0.82); --wm-vid-transition-handle: rgba(255, 255, 255, 0.6); --wm-vid-transition-selected: var(--wm-vid-selection-ring); /* A junta em si — o milímetro onde os dois clipes se encostam. */ --wm-vid-transition-seam: rgba(0, 0, 0, 0.55); /* ---------- vid-color-wheels ---------- */ --wm-vid-wheel-hue: conic-gradient( from 0deg, hsl(0 90% 55%) 0deg, hsl(30 90% 55%) 30deg, hsl(60 90% 55%) 60deg, hsl(90 90% 50%) 90deg, hsl(120 80% 45%) 120deg, hsl(150 75% 45%) 150deg, hsl(180 80% 50%) 180deg, hsl(210 85% 55%) 210deg, hsl(240 85% 58%) 240deg, hsl(270 80% 60%) 270deg, hsl(300 85% 58%) 300deg, hsl(330 88% 57%) 330deg, hsl(360 90% 55%) 360deg ); /* Saturação: branco no centro, transparente na borda. Junto com o matiz por cima, dá o disco HSL completo. */ --wm-vid-wheel-saturation: radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 34%, rgba(255, 255, 255, 0) 72% ); /* Véu que rebaixa o disco: roda de correção não é seletor de cor, é campo de deslocamento — cor berrante engana o olho. */ --wm-vid-wheel-veil: rgba(10, 10, 12, 0.34); --wm-vid-wheel-ring: rgba(255, 255, 255, 0.18); --wm-vid-wheel-ring-ativa: var(--wm-vid-selection-ring); --wm-vid-wheel-puck-fill: rgba(255, 255, 255, 0.94); --wm-vid-wheel-puck-ring: rgba(0, 0, 0, 0.62); --wm-vid-wheel-crosshair-color: rgba(255, 255, 255, 0.45); --wm-vid-wheel-neutro: rgba(255, 255, 255, 0.5); --wm-vid-wheel-lift-track: rgba(255, 255, 255, 0.16); --wm-vid-wheel-lift-fill: rgba(255, 255, 255, 0.62); /* Letra do canal (R/G/B) na leitura numérica da roda. NÃO é --wm-vid-scope-trace-*: aqueles foram medidos sobre o PRETO do instrumento (#08080a) e aqui a letra vive sobre o painel. Medido no Chrome antes de trocar: sobre --wm-vid-panel #2a2a2e o traço do scope dava R 3.16:1 e B 3.37:1 — reprovado para 11px bold — e sobre o painel claro #eaebef dava G 1.33:1, praticamente invisível. São grandezas físicas (os três primários), então ganham token próprio com nome físico em vez de herdar cor de outro instrumento. Medidos: R 5.03:1, G 8.27:1, B 5.82:1. */ --wm-vid-wheel-canal-r: #ff6b61; --wm-vid-wheel-canal-g: #50e082; --wm-vid-wheel-canal-b: #6ea8ff; /* ---------- vid-scopes ---------- Texto e escala VIVEM SOBRE O PRETO do instrumento. Medidos sobre --wm-vid-scope-bg #08080a: label rgba(255,255,255,.74) → 8.9:1 label-strong rgba(255,255,255,.92) → 14.6:1 ire rgba(255,255,255,.6) → 5.7:1 Todos acima de 4.5:1 mesmo nos 10px da escala. */ --wm-vid-scope-label: rgba(255, 255, 255, 0.74); --wm-vid-scope-label-strong: rgba(255, 255, 255, 0.92); --wm-vid-scope-ire: rgba(255, 255, 255, 0.6); /* Limites de transmissão: abaixo de 0 IRE e acima de 100 IRE o sinal é ilegal. A faixa fora é vermelha, o miolo legal some. */ --wm-vid-scope-ire-legal: rgba(255, 255, 255, 0.24); --wm-vid-scope-ire-ilegal: rgba(255, 69, 58, 0.55); --wm-vid-scope-ire-ilegal-fill: rgba(255, 69, 58, 0.1); /* Linha de tom de pele do vetorscópio (I-line, ~123°): a referência mais usada num grade de rosto. */ --wm-vid-scope-skin: rgba(255, 190, 140, 0.62); --wm-vid-scope-box: rgba(255, 255, 255, 0.1); /* ---------- vid-export-sheet ---------- A folha de exportação é a ÚNICA superfície desta frente que segue o tema do sistema: ela não julga imagem, é um diálogo de sistema. Fica clara no claro e escura no escuro — por isso usa os tokens de superfície do kit, e só o que é exclusivo dela nasce aqui. */ --wm-vid-export-scrim: rgba(0, 0, 0, 0.34); --wm-vid-export-preset-ring: var(--wm-accent); --wm-vid-export-preset-fill: var(--wm-accent-fill); --wm-vid-export-estimate: var(--wm-label-secondary); --wm-vid-export-alerta: #b3541e; --wm-vid-export-alerta-fill: rgba(179, 84, 30, 0.12); } /* No escuro (e no tema escuro do site) o alerta da folha clareia para continuar legível sobre superfície escura. */ :root[data-theme="dark"] { --wm-vid-export-scrim: rgba(0, 0, 0, 0.52); --wm-vid-export-alerta: #f0a35e; --wm-vid-export-alerta-fill: rgba(240, 163, 94, 0.16); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wm-vid-export-scrim: rgba(0, 0, 0, 0.52); --wm-vid-export-alerta: #f0a35e; --wm-vid-export-alerta-fill: rgba(240, 163, 94, 0.16); } } /* Aparência clara do editor (opt-in): o que é CHROME clareia; o que é INSTRUMENTO (scope, pré-visualização de efeito) não. */ [data-wm-editor-appearance="light"] { --wm-vid-effect-tile-bg: rgba(0, 10, 30, 0.05); --wm-vid-effect-tile-bg-hover: rgba(0, 10, 30, 0.1); --wm-vid-transition-bg: rgba(0, 10, 30, 0.14); --wm-vid-transition-edge: rgba(0, 0, 0, 0.3); --wm-vid-transition-hover: rgba(0, 10, 30, 0.22); --wm-vid-transition-accent: rgba(0, 0, 0, 0.68); --wm-vid-transition-glyph: rgba(0, 0, 0, 0.78); --wm-vid-transition-handle: rgba(0, 0, 0, 0.5); --wm-vid-transition-seam: rgba(0, 0, 0, 0.3); --wm-vid-wheel-ring: rgba(0, 0, 0, 0.2); /* REDECLARADO de propósito. --wm-vid-wheel-ring-ativa indireciona por var(--wm-vid-selection-ring) lá em cima, e var() resolve na regra que DECLARA, não em quem consome: declarada só em :root, ela congelava no #6ea8ff do escuro e continuava #6ea8ff aqui — 2.03:1 sobre o painel claro #eaebef, reprovado para elemento de interface (3:1). Medido no Chrome: getComputedStyle dava ring-ativa #6ea8ff com selection-ring já em #1d59f0, na mesma roda. Com o valor escrito aqui: 5.34:1. */ --wm-vid-wheel-ring-ativa: var(--wm-accent); --wm-vid-wheel-veil: rgba(255, 255, 255, 0.2); --wm-vid-wheel-puck-fill: rgba(255, 255, 255, 0.98); --wm-vid-wheel-crosshair-color: rgba(0, 0, 0, 0.34); --wm-vid-wheel-neutro: rgba(0, 0, 0, 0.42); --wm-vid-wheel-lift-track: rgba(0, 10, 30, 0.16); --wm-vid-wheel-lift-fill: rgba(0, 0, 0, 0.55); /* Mesmos três primários, agora medidos sobre o painel claro #eaebef: R 4.63:1, G 5.53:1, B 5.44:1. O azul do canal B é fixo de propósito, e não var(--wm-accent): B é uma grandeza física do sinal, não a cor da marca — se o accent mudar, o canal azul não pode mudar de significado junto. */ --wm-vid-wheel-canal-r: #c62d22; --wm-vid-wheel-canal-g: #0e6b4d; --wm-vid-wheel-canal-b: #2456c8; } } /* ============================================================ STEP BY STEP — cor dos seis estados de etapa Regra que a família inteira obedece: a cor NUNCA carrega o significado sozinha. Cada etapa diz o estado em texto (".wm-step__state") e por forma (✓ concluída, ! erro, número pendente). Estes tokens só reforçam o que já está escrito. Derivados dos semânticos — por isso o dark mode sai de graça e qualquer ajuste de --wm-success/--wm-error propaga para as quatro peças do step by step de uma vez. ESCOPO LOCAL, DE PROPÓSITO (mesma decisão de components/wic/wic.css): estes aliases moram na RAIZ DE CADA COMPONENTE, não em :root. Custom property com var() dentro resolve no elemento onde é DECLARADA — se eu declarasse --wm-step-pendente: var(--wm-label-secondary) em :root, ela congelaria no preto do tema claro e continuaria preta dentro de um bloco .wm-demo-dark, que redefine --wm-label-* localmente. Foi exatamente o que aconteceu: no primeiro print a seção escura saiu com "Opcional" e "Desabilitada" invisíveis. Declarando na raiz do componente, o var() resolve no contexto herdado — claro, escuro ou qualquer tema escopado no futuro. ============================================================ */ @layer tokens { .wm-step-flow, .wm-step-progress, .wm-step-mobile, .wm-step-trans { /* pendente: a etapa que ainda não chegou. Contraste medido no claro, texto de 11px sobre #ffffff: --wm-label-secondary rgba(0,0,0,.56) = 5.20:1. O rgba(0,0,0,.36) de --wm-label-tertiary daria 2.5:1 e reprovaria — por isso ele fica só no TRILHO (elemento gráfico), nunca no texto. */ --wm-step-pendente: var(--wm-label-secondary); --wm-step-pendente-soft: var(--wm-label-tertiary); --wm-step-pendente-fill: var(--wm-fill-tertiary); --wm-step-pendente-ring: var(--wm-separator-strong); /* atual: onde a pessoa está agora. Como TEXTO usa --wm-accent-text (no escuro clareia para #83a4f7, 6.74:1); como PREENCHIMENTO sólido usa --wm-accent com tinta branca, que é o único par autorizado. */ --wm-step-atual: var(--wm-accent-text); --wm-step-atual-fill: var(--wm-accent-fill); --wm-step-atual-solid: var(--wm-accent); --wm-step-atual-ink: var(--wm-label-on-accent); /* concluída: já passou e deu certo. #127a3a no claro = 5.43:1; #32d074 no escuro sobre #262629 = 8.6:1. */ --wm-step-concluida: var(--wm-success); --wm-step-concluida-fill: var(--wm-success-fill); --wm-step-concluida-solid: var(--wm-success-solid); --wm-step-concluida-ink: #ffffff; /* erro: chegou até aqui e voltou com problema. #c62f25 no claro = 8.08:1; #ff8a80 no escuro = 8.9:1. */ --wm-step-erro: var(--wm-error); --wm-step-erro-fill: var(--wm-error-fill); --wm-step-erro-solid: var(--wm-error-solid); --wm-step-erro-ink: #ffffff; /* opcional: pode ser pulada sem quebrar o fluxo. Deliberadamente neutra — "opcional" não é bom nem ruim, é dispensável. */ --wm-step-opcional: var(--wm-label-secondary); --wm-step-opcional-fill: var(--wm-fill-quaternary); --wm-step-opcional-ring: var(--wm-separator-strong); /* desabilitada: existe, mas está fora de alcance agora. O GLIFO desbota (WCAG 1.4.3 isenta controle inativo), mas a palavra "Desabilitada" continua em --wm-label-secondary: o motivo tem que ser legível mesmo quando o alvo não é clicável. */ --wm-step-desabilitada: var(--wm-label-tertiary); --wm-step-desabilitada-fill: var(--wm-fill-quaternary); --wm-step-desabilitada-label: var(--wm-label-secondary); /* conector: o trilho entre duas etapas */ --wm-step-trilho: var(--wm-separator-strong); --wm-step-trilho-feito: var(--wm-success); --wm-step-trilho-atual: var(--wm-accent); /* progresso */ --wm-step-track: var(--wm-fill-tertiary); --wm-step-fill: var(--wm-accent-gradient); --wm-step-fill-erro: var(--wm-error); } } /* ============================================================ IA NO CAMPO — cor da família field-ai Duas decisões que valem mais que a paleta: 1. A COR DA IA NÃO É A COR DO HUMANO. O que a IA preencheu usa o ciano de presença (--wm-wic-agent), o mesmo do cursor do agente no resto do kit. Se usássemos accent, "campo focado por mim" e "campo escrito pela IA" ficariam indistinguíveis — e essa distinção é o item de CONFIANÇA do componente, não enfeite. 2. CIANO NÃO É COR DE TEXTO. #2ac2f3 sobre branco dá ~1.9:1. Por isso o ciano só pinta fita, ponto e halo (elementos não textuais, isentos de 1.4.3), e todo TEXTO da família usa --wm-label-* ou --wm-accent-text, que são medidos. O selo "IA" nunca depende só da cor: tem glifo e palavra. Bloco no fim do arquivo: append é a única edição segura enquanto outros agentes escrevem aqui. ============================================================ */ @layer tokens { :root { /* ---------- identidade da IA no campo ---------- */ --wm-field-ai: var(--wm-wic-agent); /* fita, ponto, halo */ --wm-field-ai-fill: var(--wm-wic-agent-fill); --wm-field-ai-halo: var(--wm-wic-agent-halo); --wm-field-ai-label: var(--wm-label-secondary); /* TEXTO — medido */ --wm-field-ai-label-strong: var(--wm-label-primary); /* ---------- estados do gatilho ---------- */ --wm-field-ai-ocioso: var(--wm-label-tertiary); --wm-field-ai-ocioso-hover: var(--wm-accent-text); --wm-field-ai-pensando: var(--wm-field-ai); --wm-field-ai-pensando-fill: var(--wm-field-ai-fill); --wm-field-ai-escrevendo: var(--wm-field-ai); --wm-field-ai-concluido: var(--wm-success); --wm-field-ai-concluido-fill: var(--wm-success-fill); --wm-field-ai-falhou: var(--wm-error); --wm-field-ai-falhou-fill: var(--wm-error-fill); --wm-field-ai-perguntando: var(--wm-warning); --wm-field-ai-perguntando-fill: var(--wm-warning-fill); /* ---------- proposta x valor aceito ---------- */ /* Proposta é texto que a pessoa AINDA NÃO aceitou: fica em cima de um fundo que diz "isto não é seu ainda". */ --wm-field-ai-proposta-fill: var(--wm-field-ai-fill); --wm-field-ai-proposta-edge: var(--wm-field-ai-halo); --wm-field-ai-aceito: var(--wm-success); --wm-field-ai-aceito-fill: var(--wm-success-fill); /* ---------- contexto e limite ---------- */ --wm-field-ai-ctx-fill: var(--wm-fill-quaternary); --wm-field-ai-ctx-label: var(--wm-label-secondary); /* sensível = LIMITE, não erro: âmbar de atenção com cadeado e a palavra "não enviado". A cor sozinha nunca carrega o aviso. */ --wm-field-ai-sensivel: var(--wm-warning); --wm-field-ai-sensivel-fill: var(--wm-warning-fill); } } /* ============================================================ TERMINAL (code-block) — sempre escuro, independente do tema. Um console é um app de desenvolvedor com identidade própria (como o Terminal.app do macOS): nunca clareia com data-theme="light", por isso os tokens vivem invariantes aqui, fora do fork claro/escuro. ============================================================ */ @layer tokens { :root { --wm-terminal-bg-top: #1a1a20; --wm-terminal-bg-bottom: #131317; --wm-terminal-stderr: #ff6b60; --wm-terminal-success: #32d074; /* Prompt ($) e cursor piscante — mesmo tom de --wm-brand-cyan, mas como token PRÓPRIO do terminal (nunca --wm-brand-* diretamente: ver regra no topo deste arquivo). */ --wm-terminal-accent: #2ac2f3; } } /* ============================================================ VÍDEO — tela do media-player (wm-vplayer), sempre escura. A moldura de um preview de vídeo é uma TELA, não um painel de app: fica escura nos dois temas, como a tela preta de qualquer player antes do primeiro frame carregar. ============================================================ */ @layer tokens { :root { --wm-media-canvas-bg: #101116; --wm-media-poster-start: #0a1030; --wm-media-poster-end: #020b45; } } /* ============================================================ RATING — dourado fixo do preenchimento das estrelas. Convenção universal de avaliação (App Store, Google Play, etc.): não é marca nem status, então NÃO reusa --wm-accent/--wm-warning — se o accent mudasse de novo, as estrelas mudariam de sentido junto. Mesmo valor nos dois temas, como o próprio símbolo da estrela. ============================================================ */ @layer tokens { :root { --wm-rating-fill: #f5a623; } }