@inchurch/matcha-theme 20.277.0 → 21.0.0

package/tokens/_css-custom-properties.scss

@@ -1,704 +0,0 @@
-// =============================================================================
-// MATCHA DESIGN SYSTEM — Token Source (CSS Custom Properties)
-// =============================================================================
-//
-// Emite as CSS custom properties (--matcha-*) de um tema. A classe de tema
-// (ex.: .theme-default-light) recebe as vars via matcha-components($theme) →
-// matcha-css-custom-properties($theme), habilitando override em runtime sem
-// recompilação Sass (base do whitelabel e de temas adicionais — ver
-// abstracts/_theme-api.scss e docs/theming-guide.md).
-//
-// 1:1 PARIDADE com Figma variables em DS-PAINEL (fileKey K673r19KQE8lm2S74nQ5ob):
-//   - matcha/primitives  (99 vars)  →  primitives section below
-//   - matcha/colors      (117 vars) →  $matcha-color-tokens below
-//   - matcha/interaction (4 vars)   →  via matcha/color/interaction/* aliases
-//   - matcha/text/*      (30 styles) → text-* + leading-* + tracking-* props
-//   - matcha/elevation   (4 styles) →  shadow-1..4
-//   - matcha/grid        (6 styles) →  grid-col-* + grid-offset-*
-//
-// CONVENÇÃO:
-//   - Nome token Figma: `matcha/category/subcategory/variant` (slash)
-//   - Nome CSS var:     `--matcha-category-subcategory-variant` (hyphen)
-//     ex.: `matcha/color/surface/card` ↔ `--matcha-color-surface-card`
-//   - Chave do mapa $matcha-color-tokens = sufixo da var sem `--matcha-color-`
-//     ex.: `surface-card` ↔ `--matcha-color-surface-card`
-//
-// ESTRUTURA DESTE ARQUIVO:
-//   1. $matcha-color-tokens — fonte única dos valores de cor por modo
-//      (light/dark), na ordem de emissão. Todo token aqui é sobrescrevível
-//      por tema via matcha-emit-color-properties() (abstracts/_theme-api.scss).
-//   2. matcha-default-colors($mode) + $matcha-colors-light/dark — mapas flat
-//      derivados (token → valor), consumidos pelo emissor e pela theme API.
-//   3. matcha-emit-color-properties($colors) — emissor genérico.
-//   4. matcha-css-custom-properties($theme) — mixin canônico (assinatura
-//      preservada): cores via emissor + tokens estáticos (spacing, radius,
-//      tipografia, motion, grid, …) + aliases.
-//
-// =============================================================================
-@use "sass:map";
-
-// ═══════════════════════════════════════════════════════════════════════════
-// 1. COLOR TOKENS — fonte única (light/dark) na ordem de emissão
-//    LIGHT = Figma oficial (matcha/color/* JSON export hierárquico)
-//    DARK  = tokens confirmados pelo usuário (flat JSON)
-// ═══════════════════════════════════════════════════════════════════════════
-$matcha-color-tokens: (
-  // ── Surface (9) — matcha/color/surface/* ─────────────────────────────────
-  // 1:1 Figma DSV3 (Light + Dark JSON export 2026-05-29).
-  // Light mode: sage-tinted neutrals (2–4% green hue da marca) + hierarquia perceptível.
-  surface-bg: (light: #f1f4f1, dark: #111318),
-  // bg-alpha light usa cor BASE distinta (#f0f2f5) — não é #f1f4f1 com alpha.
-  // Decisão Figma intencional pra sutil shift de tint no estado transparente.
-  surface-bg-alpha: (light: rgba(#f0f2f5, .5), dark: rgba(#111318, .5)),
-  surface-bg-inverse: (light: #111318, dark: #f0f2f5),
-  surface-bg-inverse-alpha: (light: rgba(#111318, .5), dark: rgba(#f0f2f5, .5)),
-
-  // Card soft default — light #f7fcf7 (off-white com tint sage muito sutil).
-  // Reduz glare contra surface-bg #f1f4f1 (Δ ~5 luminance). Pure white só pra
-  // floating overlays via surface-card-strong (modal, command-palette).
-  // Pattern Linear / Vercel / Notion: soft cards default + bright float.
-  surface: (light: #f7fcf7, dark: #1c1f26),
-  surface-card: (light: #f7fcf7, dark: #1c1f26),
-  // Card strong — pure white (light) / lifted dark, pra floating overlays
-  // que precisam máximo destaque sobre scrim. Modal, popover, dropdown,
-  // command-palette. NÃO usar pra cards inline — vira agressivo.
-  surface-card-strong: (light: #ffffff, dark: #262a32),
-  // Canvas aninhada dentro de card (preview stage, code body, inset panels)
-  // Light: sage (= bg da page, cria recorte sutil sobre card off-white)
-  // Dark: mais clara que card (inverte lógica, dá profundidade em vez de buraco)
-  surface-inner: (light: #f1f4f1, dark: #262a32),
-  // card-alpha light usa #ffffff base (não #f7fcf7) — overlay/zebra com white puro
-  surface-card-alpha: (light: rgba(#ffffff, .85), dark: rgba(#1c1f26, .5)),
-  surface-card-inverse: (light: #1c1f26, dark: #ffffff),
-
-  surface-sidebar: (light: #e4ebe5, dark: #0d0f14),
-  surface-sidebar-hover: (light: #d8e1da, dark: #161920),
-  // table-row-hover light: neutral #f4f4f4 (Figma — não tinted sage)
-  surface-table-row-hover: (light: #f4f4f4, dark: #151a22),
-
-  // Border sólido e visível (era rgba(0,0,0,.08) = invisível sobre sage bg)
-  surface-border: (light: #e1e7e2, dark: rgba(255, 255, 255, .12)),
-  // Border mais forte pra cards elevados (hero, playground — com shadow)
-  surface-border-strong: (light: #c8d2ca, dark: rgba(255, 255, 255, .24)),
-  surface-hover: (light: rgba(#e4ebe5, .5), dark: rgba(#111318, .5)),
-
-  // Aliases (flat) — usados massivamente
-  // Light mode softening 2026-05-18: fg de #1a1d21 (17:1, "tinta preta") → #2a2d33 (12:1 AAA, "tinta carvão").
-  // Inspiração: tom entre Linear (#1a1d21, mais pesado) e GitHub (#1f2328) — reduz fatiga em sessions longas.
-  bg: (light: #f1f4f1, dark: #111318),
-  fg: (light: #2a2d33, dark: #e8eaed),
-  fg-alpha: (light: rgba(#2a2d33, .5), dark: rgba(#e8eaed, .5)),
-  fg-inverse: (light: #e8eaed, dark: #2a2d33),
-  fg-inverse-alpha: (light: rgba(#e8eaed, .5), dark: rgba(#2a2d33, .5)),
-  border: (light: #e1e7e2, dark: rgba(255, 255, 255, .12)),
-
-  // ── Text (9) — matcha/color/text/* ───────────────────────────────────────
-  // Light mode softening 2026-05-18 — todos os tons recuados ~1 step pra reduzir
-  // peso visual sem perder hierarquia. Contrastes recalculados sobre card #f7fcf7:
-  //   primary   #2a2d33 → 12.0:1  (AAA, antes era #1a1d21 17:1 = exagero)
-  //   secondary #5a6066 → 6.8:1   (AAA Large + AA Normal, antes #4a5056 8.5:1)
-  //   muted     #6e7681 → 5.2:1   (AA, antes #5a6a5e 7.4:1)
-  //   label     #7a818a → 4.6:1   (AA, antes #6b7177 5.9:1)
-  text-primary: (light: #2a2d33, dark: #e8eaed),
-  text-inverse: (light: #e8eaed, dark: #2a2d33),
-  text-secondary: (light: #5a6066, dark: rgba(255, 255, 255, .7)),
-  // Muted: GitHub-ish neutral (antes era sage-tinted #5a6a5e — verde demais em form helper text)
-  text-muted: (light: #6e7681, dark: #a8b5a0),
-  text-label: (light: #7a818a, dark: #bdc1c6),
-  // Placeholder: #7a818a (4.5:1 sobre card — passa AA mantendo low-emphasis)
-  text-placeholder: (light: #7a818a, dark: #6e747a),
-  text-hint: (light: #7a818a, dark: #9aa0a6),
-  text-static-light: (light: #ffffff, dark: #ffffff),
-  text-static-dark: (light: #1a1d21, dark: #1a1d21),
-
-  // ── Icon (2) — matcha/color/icon/* ───────────────────────────────────────
-  // Light mode softening 2026-05-18:
-  //   default #5f656b → #75767a — recua ícones decorativos (sort, leading) pra não competir com texto
-  //   active  #1a1d21 → #3d4248 — ainda firme mas menos "tinta china" em toggles/sortable headers
-  icon-default: (light: #9aa0a6, dark: #9aa0a6),
-  icon-active: (light: #3d4248, dark: #e8eaed),
-
-  // ── Interaction (4) — matcha/color/interaction/* ─────────────────────────
-  // Light mode: disabled sólido com sage tint (antes alpha sobre bg = inconsistente)
-  interaction-disabled-bg: (light: #cfd6d1, dark: #282c34),
-  interaction-disabled-bg-alpha: (light: rgba(#cfd6d1, .5), dark: rgba(#282c34, .5)),
-  interaction-disabled-fg: (light: #8a9090, dark: rgba(#e8eaed, .38)),
-  interaction-disabled-border: (light: #c8d2ca, dark: rgba(#e8eaed, .38)),
-  focus-ring: (light: #43a047, dark: #a8d94e),
-  // Aliases legados
-  disabled: (light: #cfd6d1, dark: #282c34),
-  disabled-fg: (light: #8a9090, dark: rgba(#e8eaed, .38)),
-  disabled-border: (light: #c8d2ca, dark: rgba(#e8eaed, .38)),
-  disabled-bg: (light: #cfd6d1, dark: #282c34),
-
-  // ── Neutral (4 tokens Figma matcha/color/neutral/*) ───────────────────────
-  // Cor base pra botões e controles sem ênfase semântica (basic, ghost default).
-  // Light: sage-tinted grey | Dark: grey neutro escuro.
-  neutral: (light: #e4ebe5, dark: #282c34),
-  neutral-contrast: (light: #1a1d21, dark: #e8eaed),
-  neutral-alpha: (light: rgba(#1a1d21, .08), dark: rgba(#e8eaed, .1)),
-  neutral-hover: (light: #d8e1da, dark: #333842),
-
-  // ── Elevation (6) — matcha/color/elevation/* ─────────────────────────────
-  elevation-surface-1: (light: #f8faf8, dark: #1c1f26),   // cards, dropdowns (sage)
-  elevation-surface-2: (light: #ffffff, dark: #262a32),   // menus, floating
-  elevation-surface-3: (light: #ffffff, dark: #2e333c),   // modals, drawers
-  // Shadow base: Figma light usa tinta accent #1A2C1E (não preto puro), dark usa #000000
-  elevation-shadow: (light: #1a2c1e, dark: #000000),
-  elevation-shadow-tint: (light: #1a2c1e, dark: #000000),  // tint da marca pra shadows light
-  elevation-scrim: (light: #000000, dark: #000000),
-  // Figma matcha/color/state-layer/fg (camada sobre interações)
-  state-layer-fg: (light: #000000, dark: #ffffff),
-
-  // ── Accent (10) — matcha/color/accent/* ──────────────────────────────────
-  // Brand inChurch: lime/chartreuse #86BD00 (hue 78°, "matcha tea").
-  // Brand bright #86BD00 com white dá 2.25:1 (fail UI). Light mode escurece pra
-  // #6E9A00 (3.31:1 — passa WCAG UI/large text mínimo 3:1) mantendo a MESMA hue
-  // 78° pra preservar identidade lime. Tradeoff aceito 2026-05-18: accent é usado
-  // praticamente só em buttons (CTA filled c/ label branco) onde 3:1 UI é OK.
-  // Dark mode: lima bright #a8d94e + label preto (~11:1 AAA).
-  // accent-contrast 1:1 Figma DSV3: rgba(0,0,0,.87) em AMBOS os modos (Light + Dark).
-  // É label-on-accent ripple/text token, semantica é "preto sobre amarelo-lima". Pra label
-  // branco em Filled buttons use accent/text-on (branco no Light / quase-preto no Dark).
-  accent: (light: #54a71d, dark: #a8d94e),
-  accent-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
-  accent-contrast-alpha: (light: rgba(0, 0, 0, .1), dark: rgba(0, 0, 0, .1)),
-  // Figma matcha/color/accent/text-on — branco puro Light / quase preto Dark.
-  // Dedicado pra foreground sobre accent/default em Filled buttons, icon buttons.
-  // Garante contraste ≥ 3:1 em ambos modos (supera accent/contrast que é preto fixo).
-  accent-text-on: (light: #ffffff, dark: #1a1d21),
-  accent-alpha: (light: rgba(#54a71d, .1), dark: rgba(#a8d94e, .1)),
-  // Light/dark auxiliares: spring green tint (hue 143° matching accent base)
-  accent-light: (light: #b9e3a3, dark: #b9f6ca),
-  accent-dark: (light: #3a7515, dark: #c5e1a5),
-  // Hover/pressed: step ~10% darker mesma hue (3.0:1 → 3.75:1 → 4.7:1)
-  accent-hover: (light: #4b9519, dark: #bee57a),
-  accent-pressed: (light: #428316, dark: #d4eea0),
-  // Surface tints — light spring green
-  accent-surface-hover: (light: #e8f3dc, dark: #161e12),
-  accent-surface-pressed: (light: #cbe4ab, dark: #1f2d18),
-
-  // ── Accent Secondary (teal — 4 tokens Figma matcha/color/accent-2/*) ─────
-  // Light #00796b (teal-700) | Dark #4fb7ad (teal-light)
-  accent-2: (light: #00796b, dark: #4fb7ad),
-  accent-2-contrast: (light: #ffffff, dark: #ffffff),
-  accent-2-alpha: (light: rgba(#00796b, .10), dark: rgba(#4fb7ad, .12)),
-  accent-2-surface: (light: #e0f0ee, dark: #1d332e),
-
-  // ── Primary (10) — matcha/color/primary/* ────────────────────────────────
-  // Light #1664c2 (blue-700) | Dark #64b5f6 (blue-300)
-  primary: (light: #1664c2, dark: #64b5f6),
-  primary-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
-  primary-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
-  primary-alpha: (light: rgba(#1664c2, .1), dark: rgba(#64b5f6, .1)),
-  primary-light: (light: #b3d7fd, dark: #bbdefb),
-  primary-dark: (light: #0d3c8c, dark: #90caf9),
-  primary-hover: (light: #2576d2, dark: #90caf9),
-  primary-pressed: (light: #378ce1, dark: #bbdefb),
-  primary-surface-hover: (light: #e4eefa, dark: #141922),
-  primary-surface-pressed: (light: #cddef5, dark: #1a2436),
-
-  // ── Feedback — Success (9) ───────────────────────────────────────────────
-  success: (light: #2e7d32, dark: #69f0ae),
-  success-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
-  success-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
-  success-alpha: (light: rgba(#2e7d32, .1), dark: rgba(#69f0ae, .1)),
-  success-hover: (light: #388e3c, dark: #4cd992),
-  success-pressed: (light: #43a047, dark: #33c078),
-  success-fill: (light: #2e7d32, dark: #43a047),
-  success-surface-hover: (light: #e8f5e9, dark: #121d17),
-  success-surface-pressed: (light: #c8e6c9, dark: #192f24),
-
-  // ── Feedback — Danger (9) ────────────────────────────────────────────────
-  danger: (light: #c81010, dark: #ef9a9a),
-  danger-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
-  danger-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
-  danger-alpha: (light: rgba(#c81010, .1), dark: rgba(#ef9a9a, .1)),
-  danger-hover: (light: #da2c2c, dark: #f4b8b8),
-  danger-pressed: (light: #e64848, dark: #f7d0d0),
-  danger-fill: (light: #c81010, dark: #e53935),
-  danger-surface-hover: (light: #fae8e8, dark: #1d1616),
-  danger-surface-pressed: (light: #f5d2d2, dark: #2f2121),
-
-  // ── Feedback — Warn (9) ──────────────────────────────────────────────────
-  // Light #a64e00 (âmbar escuro) | Dark #ffb74d (orange-300)
-  warn: (light: #a64e00, dark: #ffb74d),
-  warn-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
-  warn-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(0, 0, 0, .1)),
-  warn-alpha: (light: rgba(#a64e00, .1), dark: rgba(#ffb74d, .1)),
-  warn-hover: (light: #924200, dark: #e69f33),
-  warn-pressed: (light: #7e3600, dark: #cc881a),
-  warn-fill: (light: #a64e00, dark: #fb8c00),
-  warn-surface-hover: (light: #fcf0e1, dark: #1e1910),
-  warn-surface-pressed: (light: #f8e1c3, dark: #2f2616),
-
-  // ── Feedback — Info (8) ──────────────────────────────────────────────────
-  info: (light: #0a2fc2, dark: #4090d8),
-  info-contrast: (light: #ffffff, dark: #ffffff),
-  info-contrast-alpha: (light: rgba(255, 255, 255, .1), dark: rgba(255, 255, 255, .1)),
-  info-alpha: (light: rgba(#0a2fc2, .1), dark: rgba(#4090d8, .1)),
-  info-hover: (light: #294cd4, dark: #5aa0e0),
-  info-pressed: (light: #4265e0, dark: #74b0e8),
-  info-surface-hover: (light: #ebeefa, dark: #0f141e),
-  info-surface-pressed: (light: #d8def5, dark: #131f31),
-
-  // ── Palette (18) — matcha/color/palette/* ────────────────────────────────
-  palette-teal: (light: #00796b, dark: #4fb7ad),
-  palette-teal-light: (light: #4fb7ad, dark: #009688),
-  palette-teal-alpha: (light: rgba(#00796b, .1), dark: rgba(#4fb7ad, .1)),
-  palette-light-blue: (light: #0288d1, dark: #54c5f7),
-  palette-light-blue-light: (light: #54c5f7, dark: #03a9f4),
-  palette-light-blue-alpha: (light: rgba(#0288d1, .1), dark: rgba(#54c5f7, .1)),
-  palette-purple: (light: #9c27b0, dark: #bb6ac8),
-  palette-purple-light: (light: #bb6ac8, dark: #9c27b0),
-  palette-purple-alpha: (light: rgba(#9c27b0, .1), dark: rgba(#bb6ac8, .1)),
-  palette-pink: (light: #d81b60, dark: #e46291),
-  palette-pink-light: (light: #e46291, dark: #d81b60),
-  palette-pink-alpha: (light: rgba(#d81b60, .1), dark: rgba(#e46291, .1)),
-  palette-orange: (light: #e65100, dark: #f9a25d),
-  palette-orange-light: (light: #f9a25d, dark: #f77814),
-  palette-orange-alpha: (light: rgba(#e65100, .1), dark: rgba(#f9a25d, .1)),
-  palette-yellow: (light: #ffa000, dark: #efd64f),
-  palette-yellow-light: (light: #efd64f, dark: #e8c300),
-  palette-yellow-alpha: (light: rgba(#ffa000, .1), dark: rgba(#efd64f, .1)),
-
-  // ── Chart (5) — matcha/color/chart/* ─────────────────────────────────────
-  chart-series-1: (light: #615ce5, dark: #8782f2),
-  chart-series-2: (light: #42a147, dark: #66ba6b),
-  chart-series-3: (light: #ed6645, dark: #f5876b),
-  chart-series-4: (light: #c28700, dark: #ffc93d),
-  chart-series-5: (light: #008094, dark: #26c2d9),
-);
-
-// ═══════════════════════════════════════════════════════════════════════════
-// 2. MAPAS FLAT POR MODO — token → valor (derivados de $matcha-color-tokens).
-//    Consumidos pelo emissor abaixo e pela theme API
-//    (matcha-build-color-map() em abstracts/_theme-api.scss).
-// ═══════════════════════════════════════════════════════════════════════════
-@function matcha-default-colors($mode) {
-  $out: ();
-  @each $token, $modes in $matcha-color-tokens {
-    $out: map.set($out, $token, map.get($modes, $mode));
-  }
-  @return $out;
-}
-
-$matcha-colors-light: matcha-default-colors(light);
-$matcha-colors-dark: matcha-default-colors(dark);
-
-// ═══════════════════════════════════════════════════════════════════════════
-// 3. EMISSOR GENÉRICO — mapa flat (token → valor) vira --matcha-color-<token>.
-//    Usado pelo mixin canônico abaixo e por matcha-define-theme() (theme API).
-// ═══════════════════════════════════════════════════════════════════════════
-// $aliases (opcional): token → "--matcha-prim-*". Quando presente p/ um token, emite
-// `var(--matcha-prim-*)` (Camada 2 referencia a primitiva) em vez do hex literal.
-// A rota clássica (matcha-css-custom-properties) passa $matcha-prim-aliases-{light,dark};
-// matcha-define-theme() não passa (mantém hex computado dos seeds — whitelabel intacto).
-@mixin matcha-emit-color-properties($colors, $aliases: ()) {
-  @each $token, $value in $colors {
-    $alias: map.get($aliases, $token);
-    @if $alias {
-      --matcha-color-#{$token}: var(#{$alias});
-    } @else {
-      --matcha-color-#{$token}: #{$value};
-    }
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// 4. MIXIN CANÔNICO — assinatura preservada (retrocompat).
-// ═══════════════════════════════════════════════════════════════════════════
-@mixin matcha-css-custom-properties($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  // ── Cores semânticas (ver $matcha-color-tokens acima) ────────────────────
-  // Aliases sólidos → var(--matcha-prim-*); derivados/alphas/cross-semantic → hex literal.
-  @include matcha-emit-color-properties(
-    if($is-dark, $matcha-colors-dark, $matcha-colors-light),
-    if($is-dark, $matcha-prim-aliases-dark, $matcha-prim-aliases-light)
-  );
-
-  // ── Feedback namespace (matcha/color/feedback/* canon DSV3) ───────────────
-  // Aliases semânticos pros tokens base — namespace dedicado pra status/banners/
-  // table row variants. Naming match Figma DSV3 (flat: feedback/info, sem suffix).
-  --matcha-color-feedback-info: var(--matcha-color-info);
-  --matcha-color-feedback-success: var(--matcha-color-success);
-  --matcha-color-feedback-warn: var(--matcha-color-warn);
-  --matcha-color-feedback-danger: var(--matcha-color-danger);
-
-  // Variantes alpha pra row backgrounds, badges filled-alpha, etc.
-  --matcha-color-feedback-info-alpha: var(--matcha-color-info-alpha);
-  --matcha-color-feedback-success-alpha: var(--matcha-color-success-alpha);
-  --matcha-color-feedback-warn-alpha: var(--matcha-color-warn-alpha);
-  --matcha-color-feedback-danger-alpha: var(--matcha-color-danger-alpha);
-
-  // Surface hover (bg tinted pra hover em row de table)
-  --matcha-color-feedback-info-surface-hover: var(--matcha-color-info-surface-hover);
-  --matcha-color-feedback-success-surface-hover: var(--matcha-color-success-surface-hover);
-  --matcha-color-feedback-warn-surface-hover: var(--matcha-color-warn-surface-hover);
-  --matcha-color-feedback-danger-surface-hover: var(--matcha-color-danger-surface-hover);
-
-  // ── Spacing (14 tokens — matches matcha/space/* exato) ────────────────────
-  --matcha-space-025: 2px;
-  --matcha-space-050: 4px;
-  --matcha-space-075: 6px;
-  --matcha-space-100: 8px;
-  --matcha-space-150: 12px;
-  --matcha-space-200: 16px;
-  --matcha-space-250: 20px;
-  --matcha-space-300: 24px;
-  --matcha-space-400: 32px;
-  --matcha-space-500: 40px;
-  --matcha-space-600: 48px;
-  --matcha-space-800: 64px;
-  --matcha-space-1000: 80px;
-  --matcha-space-1200: 96px;
-
-  // ── Border radius (8 tokens — matches matcha/radius/* exato) ─────────────
-  --matcha-radius-none: 0;
-  --matcha-radius-sm: 2px;
-  --matcha-radius-md: 4px;
-  --matcha-radius-3xs: 6px;    // Figma matcha/radius/3xs
-  --matcha-radius-lg: 8px;
-  --matcha-radius-2xl: 12px;   // Figma: 12px (antes code tinha 24, divergia)
-  --matcha-radius-xl: 16px;
-  --matcha-radius-3xl: 24px;   // Figma: matcha/radius/3xl (criado 2026-05-06 pra cobrir uso do utility .radius-24)
-  --matcha-radius-pill: 9999px;
-  // Alias legado pra usos em páginas de doc (refatorar depois pra usar radius-2xl)
-  --matcha-radius-card: var(--matcha-radius-2xl);
-
-  // ── Border width (4 tokens — matches matcha/border/* exato) ──────────────
-  --matcha-border-hairline: 1px;   // Subtle borders (card outlines, internal separators)
-  --matcha-border-thin: 2px;       // Primary borders (button outlines, form fields, active states)
-  --matcha-border-medium: 4px;     // Emphasis borders (status indicators, nav-item indicators, focus rings on large)
-  --matcha-border-thick: 8px;      // Heavy borders (section dividers, decoration)
-
-  // ── Font family (1 token) ────────────────────────────────────────────────
-  --matcha-font-family: 'Manrope', sans-serif;
-
-  // ── Font size (13 tokens — matches matcha/font/size/* from Figma) ─────────
-  --matcha-font-size-3xs: 8px;
-  --matcha-font-size-2xs: 10px;
-  --matcha-font-size-xs: 12px;
-  --matcha-font-size-sm: 14px;
-  --matcha-font-size-md: 16px;
-  --matcha-font-size-lg: 18px;
-  --matcha-font-size-xl: 20px;
-  --matcha-font-size-2xl: 24px;
-  --matcha-font-size-3xl: 32px;
-  --matcha-font-size-4xl: 36px;
-  --matcha-font-size-5xl: 48px;
-  --matcha-font-size-6xl: 60px;
-  --matcha-font-size-7xl: 72px;
-
-  // ── Font weight (8 tokens — matches matcha/font/weight/* exato) ──────────
-  // Canônico Figma: extralight (200), light (300), normal (400), medium (500),
-  // semi-bold (600), bold (700), extrabold (800), black (900)
-  // Código mantém regular/semibold por retrocompat + aliases Figma-exatos
-  --matcha-weight-extralight: 200;  // Figma canonical
-  --matcha-weight-light: 300;       // Figma canonical
-  --matcha-weight-regular: 400;
-  --matcha-weight-normal: 400;      // Figma canonical alias
-  --matcha-weight-medium: 500;
-  --matcha-weight-semibold: 600;
-  --matcha-weight-semi-bold: 600;   // Figma canonical alias
-  --matcha-weight-bold: 700;
-  --matcha-weight-extrabold: 800;   // Figma VariableID:17195:11 (criado oficialmente)
-  --matcha-weight-black: 900;
-
-  // ── Typography — 15 canonical text styles (1:1 com matcha/text/* Figma) ──
-  // 13 styles publicados + `display` e `p-tiny` (recriados no Figma 2026-06-03).
-  --matcha-text-display-hero: 36px; // matcha/text/Stat Card    (EB 36/40/-1.2)
-  --matcha-text-display: 32px;      // matcha/text/display      (Bold 32/40/-0.3)
-  --matcha-text-headline: 24px;     // matcha/text/headline     (Bold 24/32/-0.3)
-  --matcha-text-title-lg: 20px;     // matcha/text/title-large  (SemiBold 20/28)
-  --matcha-text-title-md: 18px;     // matcha/text/title-medium (SemiBold 18/24)
-  --matcha-text-title-sm: 16px;     // matcha/text/title-small  (SemiBold 16/22)
-  --matcha-text-title-xs: 14px;     // matcha/text/title-tiny   (ExtraBold 14/20)
-  --matcha-text-body-lg: 16px;      // matcha/text/p-large      (Regular 16/24)
-  --matcha-text-body-md: 14px;      // matcha/text/p-medium     (Regular 14/20)
-  --matcha-text-body-sm: 12px;      // matcha/text/p-small      (Regular 12/16)
-  --matcha-text-p-tiny: 11px;       // matcha/text/p-tiny       (Regular 11/14/0.3)
-  --matcha-text-label-lg: 16px;     // matcha/text/label-large  (Medium 16/22)
-  --matcha-text-label-md: 14px;     // matcha/text/label-medium (Medium 14/20)
-  --matcha-text-label-sm: 12px;     // matcha/text/label-small  (Medium 12/16)
-  --matcha-text-overline: 10px;     // matcha/text/Uppercase    (SemiBold 10/14/1)
-
-  // Shorthand aliases (usados massivamente em components/*.scss)
-  --matcha-text-xs: var(--matcha-text-p-tiny);    // 11px  — legendas, metadados
-  --matcha-text-sm: var(--matcha-text-body-sm);   // 12px  — texto auxiliar
-  --matcha-text-md: var(--matcha-text-body-md);   // 14px  — corpo padrão
-  --matcha-text-lg: var(--matcha-text-body-lg);   // 16px  — texto de destaque
-  --matcha-text-xl: var(--matcha-text-title-md);  // 18px  — títulos de grupo
-
-  // ── Line heights — canônico (matches Figma text styles) ──────────────────
-  --matcha-leading-display-hero: 40px; // Stat Card
-  --matcha-leading-display: 40px;
-  --matcha-leading-headline: 32px;
-  --matcha-leading-title-lg: 28px;
-  --matcha-leading-title-md: 24px;
-  --matcha-leading-title-sm: 22px;
-  --matcha-leading-title-xs: 20px;     // title-tiny
-  --matcha-leading-body-lg: 24px;
-  --matcha-leading-body-md: 20px;
-  --matcha-leading-body-sm: 16px;
-  --matcha-leading-p-tiny: 14px;
-  --matcha-leading-label-lg: 22px;
-  --matcha-leading-label-md: 20px;
-  --matcha-leading-label-sm: 16px;
-  --matcha-leading-overline: 14px;     // Uppercase
-
-  // ── Tracking (letter-spacing) — só styles com valor não-zero ─────────────
-  --matcha-tracking-display-hero: -1.2px; // Stat Card
-  --matcha-tracking-display: -0.3px;
-  --matcha-tracking-headline: -0.3px;
-  --matcha-tracking-overline: 1px;        // Uppercase
-  --matcha-tracking-p-tiny: 0.3px;
-
-  // Shorthand aliases para line-heights (acompanham --matcha-text-*)
-  --matcha-leading-xs: var(--matcha-leading-p-tiny);    // 14px
-  --matcha-leading-sm: var(--matcha-leading-body-sm);   // 16px
-  --matcha-leading-md: var(--matcha-leading-body-md);   // 20px
-  --matcha-leading-lg: var(--matcha-leading-body-lg);   // 24px
-  --matcha-leading-xl: var(--matcha-leading-title-md);  // 24px
-
-  // ── Line height primitives (4 tokens — matches matcha/line-height/*) ─────
-  --matcha-line-height-none: 1;
-  --matcha-line-height-tight: 1.2;
-  --matcha-line-height-normal: 1.5;
-  --matcha-line-height-relaxed: 1.75;
-
-  // ── Letter spacing (primitives + semantic aliases) ───────────────────────
-  --matcha-letter-spacing-tight: -0.5px;
-  --matcha-letter-spacing-normal: 0px;
-  --matcha-letter-spacing-wide: 0.5px;
-  --matcha-letter-spacing-wider: 1px;
-  // Semantic aliases alinhados com Figma text styles
-  --matcha-letter-spacing-button: 0.2px;   // matcha/text/button-*
-  --matcha-letter-spacing-caption: 0.3px;  // matcha/text/caption + link-sm
-
-  // ── Elevation (4 shadow tokens) ──────────────────────────────────────────
-  --matcha-shadow-1: #{if($is-dark, $shadow-1-dark, $shadow-1-light)};
-  --matcha-shadow-2: #{if($is-dark, $shadow-2-dark, $shadow-2-light)};
-  --matcha-shadow-3: #{if($is-dark, $shadow-3-dark, $shadow-3-light)};
-  --matcha-shadow-4: #{if($is-dark, $shadow-4-dark, $shadow-4-light)};
-
-  // ── Vars estruturais de componente (mode-dependentes, ex-@if $is-dark) ───
-  // Bordas que só existiam no dark + shimmer do skeleton. No light viram no-op
-  // (0/transparent) pra não alterar layout. O $is-dark aqui é o seletor de modo
-  // legítimo da emissão (mesmo papel dos shadows acima) — não é o $is-dark
-  // espalhado nos componentes, que foi eliminado na migração runtime-theming.
-  --matcha-skeleton-shimmer: #{if($is-dark, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.5))};
-  --matcha-chart-card-border: #{if($is-dark, 1px solid rgba(#212121, 0.06), 0 solid transparent)};
-  --matcha-section-border: #{if($is-dark, 1px solid rgba(#212121, 0.06), 0 solid transparent)};
-  --matcha-calendar-border: #{if($is-dark, 1px solid var(--matcha-color-surface-border), 0 solid transparent)};
-  --matcha-drawer-border: #{if($is-dark, 1px solid var(--matcha-color-surface-border), 0 solid transparent)};
-
-  // ── Animation (4 tokens — matches matcha/duration/* from Figma) ──────────
-  --matcha-duration-instant: 80ms;
-  --matcha-duration-fast: 200ms;
-  --matcha-duration-normal: 400ms;
-  --matcha-duration-slow: 600ms;
-
-  // ── Easing (4 tokens — matches matcha/easing/* from Figma) ───────────────
-  --matcha-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
-  --matcha-easing-accelerated: cubic-bezier(0.4, 0, 1, 1);
-  --matcha-easing-decelerated: cubic-bezier(0, 0, 0.2, 1);
-  --matcha-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-
-  // ── Opacity (7 tokens — matches matcha/opacity/* from Figma) ─────────────
-  --matcha-opacity-hover: 0.04;
-  --matcha-opacity-subtle: 0.10;
-  --matcha-opacity-medium: 0.20;
-  --matcha-opacity-strong: 0.30;
-  --matcha-opacity-disabled: 0.38;
-  --matcha-opacity-overlay-soft: 0.40;
-  // Específico do matcha/option (Figma DSV3 14237:113) — diferente do disabled global (0.38)
-  --matcha-opacity-option-disabled: 0.5;
-  --matcha-opacity-secondary: 0.54;
-  --matcha-opacity-high: 0.87;
-
-  // ── State layers (matches matcha/state-layer/* from Figma) ────────────────
-  --matcha-state-layer-subtle: 0.04;   // Figma matcha/state-layer/subtle
-  --matcha-state-layer-hover: 0.08;    // Figma matcha/state-layer/hover
-  --matcha-state-layer-pressed: 0.12;  // Figma matcha/state-layer/pressed
-  --matcha-state-layer-active: 0.16;   // Figma matcha/state-layer/active
-  // Aliases legados (usados nos componentes atuais)
-  --matcha-state-hover: var(--matcha-state-layer-hover);
-  --matcha-state-active: var(--matcha-state-layer-pressed);
-  --matcha-state-focus-ring-width: 2px;
-  --matcha-state-focus-ring-offset: 2px;
-
-  // ── Scrim / Overlay (Figma matcha/overlay Type=Modal / Type=Drawer) ──────
-  --matcha-scrim-modal: rgba(0, 0, 0, 0.5);
-  --matcha-scrim-modal-blur: 6px;
-  --matcha-scrim-drawer: rgba(0, 0, 0, 0.3);
-  --matcha-scrim-drawer-blur: 4px;
-
-  // ── Icon sizes (4 tokens — matches matcha/icon/size/* exato) ─────────────
-  --matcha-icon-size-sm: 16px;
-  --matcha-icon-size-md: 24px;
-  --matcha-icon-size-lg: 32px;
-  --matcha-icon-size-xl: 48px;
-
-  // ── Avatar sizes (1:1 com Figma matcha/avatar — Type=Photo, Size variants)
-  --matcha-avatar-xs:  24px;
-  --matcha-avatar-sm:  32px;
-  --matcha-avatar-md:  40px;
-  --matcha-avatar-lg:  56px;
-  --matcha-avatar-xl:  80px;
-  --matcha-avatar-2xl: 96px;
-  // Status indicator — 1:1 com Figma (Status ellipse em cada Size variant)
-  --matcha-avatar-status-xs:  6px;
-  --matcha-avatar-status-sm:  8px;
-  --matcha-avatar-status-md:  10px;
-  --matcha-avatar-status-lg:  12px;
-  --matcha-avatar-status-xl:  14px;
-  --matcha-avatar-status-2xl: 16px;
-
-  // ── Z-index (8 tokens — matches matcha/z-index/* from Figma) ─────────────
-  --matcha-z-base: 1;
-  --matcha-z-dropdown: 100;
-  --matcha-z-sticky: 200;
-  --matcha-z-popover: 300;
-  --matcha-z-tooltip: 400;
-  --matcha-z-modal-bg: 998;
-  --matcha-z-modal: 999;
-  --matcha-z-overlay: 1000;
-  // Panel flutuante (matcha-panel) — acima de modal pra suportar select/menu
-  // dentro de modal. Renderizado via portal-to-body fora de stacking contexts.
-  --matcha-z-popover-floating: 10001;
-
-  // ── Grid (22 tokens — 1:1 com matcha/grid/* do Figma) ────────────────────
-  // Frames (breakpoints)
-  --matcha-grid-frame-mobile: 375px;
-  --matcha-grid-frame-tablet: 768px;
-  --matcha-grid-frame-notebook: 1360px;
-  --matcha-grid-frame-wide: 1920px;
-  // Chrome
-  --matcha-grid-header-height: 56px;
-  --matcha-grid-header-height-mobile: 48px;
-  --matcha-grid-sidebar-rail: 72px;
-  --matcha-grid-sidebar-submenu: 216px;
-  --matcha-grid-sidebar-total: 304px;
-  --matcha-grid-sidebar-gap: 16px;
-  // Gutters (espaço entre colunas)
-  --matcha-grid-gutter-compact: 8px;
-  --matcha-grid-gutter-default: 16px;
-  --matcha-grid-gutter-wide: 16px;
-  --matcha-grid-max-content-width: 1600px;
-  // Column widths (largura INDIVIDUAL de coluna) — Figma verdadeiro
-  --matcha-grid-col-painel-full: 72px;
-  --matcha-grid-col-painel-rail: 88px;
-  --matcha-grid-col-painel-compact: 96px;
-  --matcha-grid-col-wide-full: 120px;
-  --matcha-grid-col-wide-rail: 112px;
-  // Content widths (área útil total) — Figma verdadeiro
-  --matcha-grid-content-painel-full: 1040px;
-  --matcha-grid-content-painel-rail: 1232px;
-  --matcha-grid-content-wide-full: 1616px;
-  --matcha-grid-content-wide-rail: 1520px;
-
-  // Public-facing column widths (site institucional/landing — breakpoint-aware)
-  --matcha-grid-col-public-desktop: 80px;
-  --matcha-grid-col-public-mobile: 80px;
-  --matcha-grid-col-public-tablet: 64px;
-
-  // Horizontal offsets (distância da borda do frame ao primeiro col da grid)
-  --matcha-grid-offset-painel-compact: 24px;
-  --matcha-grid-offset-painel-full: 304px;
-  --matcha-grid-offset-painel-rail: 96px;
-  --matcha-grid-offset-wide-full: 304px;
-  --matcha-grid-offset-wide-rail: 248px;
-
-  // ── Breakpoints (6 tokens — Tailwind-aligned, expostos como CSS vars) ────
-  // Pra container queries, JS-side responsive logic (`matchMedia`) e media
-  // queries inline (`@media (min-width: var(...))` em CSS moderno). Valores
-  // alinhados ao padrão Tailwind/Chakra — familiares e cobrem todos os tiers
-  // (mobile pequeno até desktop wide). 1:1 com Figma `matcha/bp/*`.
-  //
-  // NOTA: SCSS `@mixin breakpoint(...)` em `_breakpoints-tokens.scss` usa
-  // valores Angular Material legacy (600/1024/1440/1920) — DESALINHADO destes.
-  // Em refactors novos, prefira CSS custom prop `var(--matcha-bp-md)` em vez
-  // do mixin SCSS.
-  --matcha-bp-xs:  480px;   // mobile pequeno
-  --matcha-bp-sm:  640px;   // mobile grande / tablet portrait
-  --matcha-bp-md:  768px;   // tablet
-  --matcha-bp-lg:  1024px;  // desktop pequeno
-  --matcha-bp-xl:  1280px;  // desktop padrão
-  --matcha-bp-2xl: 1536px;  // desktop grande / wide
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // 16. NAMING-PARITY ALIASES
-  // Aliases que espelham o nome exato das variables do Figma, garantindo que
-  // dev possa referenciar o token pelo nome que vê no Figma.
-  // ═════════════════════════════════════════════════════════════════════════
-
-  // Figma: matcha/color/surface/background → ↔ --matcha-color-surface-bg
-  --matcha-color-surface-background: var(--matcha-color-surface-bg);
-  --matcha-color-surface-background-alpha: var(--matcha-color-surface-bg-alpha);
-  --matcha-color-surface-background-inverse: var(--matcha-color-surface-bg-inverse);
-
-  // Figma: matcha/color/neutral/default → ↔ --matcha-color-neutral
-  --matcha-color-neutral-default: var(--matcha-color-neutral);
-
-  // Figma: matcha/color/interaction/focus-ring → ↔ --matcha-color-focus-ring
-  --matcha-color-interaction-focus-ring: var(--matcha-color-focus-ring);
-
-  // Figma: matcha/z-index/{base,dropdown,…} → ↔ --matcha-z-{base,dropdown,…}
-  --matcha-z-index-base: var(--matcha-z-base);
-  --matcha-z-index-dropdown: var(--matcha-z-dropdown);
-  --matcha-z-index-sticky: var(--matcha-z-sticky);
-  --matcha-z-index-popover: var(--matcha-z-popover);
-  --matcha-z-index-tooltip: var(--matcha-z-tooltip);
-  --matcha-z-index-modal-bg: var(--matcha-z-modal-bg);
-  --matcha-z-index-modal: var(--matcha-z-modal);
-  --matcha-z-index-overlay: var(--matcha-z-overlay);
-  --matcha-z-index-popover-floating: var(--matcha-z-popover-floating);
-
-  // Figma: matcha/font/weight/semi-bold → ↔ --matcha-weight-semibold
-  --matcha-font-weight-extralight: var(--matcha-weight-extralight);
-  --matcha-font-weight-light: var(--matcha-weight-light);
-  --matcha-font-weight-semi-bold: var(--matcha-weight-semibold);
-  --matcha-font-weight-regular: var(--matcha-weight-regular);
-  --matcha-font-weight-medium: var(--matcha-weight-medium);
-  --matcha-font-weight-bold: var(--matcha-weight-bold);
-  --matcha-font-weight-extrabold: var(--matcha-weight-extrabold);
-  --matcha-font-weight-black: var(--matcha-weight-black);
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // 17. GRADIENTS
-  // Gradients tonais semânticos. Compostos por 2 stops (alpha → surface-card)
-  // pra dar fade lateral em banners. Mantém compat com Figma — lá cada stop
-  // é uma variable separada (gradients não são tipo nativo de variable).
-  // Centralizar aqui evita repetir o linear-gradient em cada componente.
-  // ═════════════════════════════════════════════════════════════════════════
-
-  // Figma DSV3 (matcha/banner 19080:308): tone="info" mapeia pra primary-alpha
-  // (#64b5f6 azul), não info-alpha (cyan/turquesa) — alinhamento visual com border + eyebrow.
-  --matcha-gradient-banner-info: linear-gradient(
-    90deg,
-    var(--matcha-color-primary-alpha) 0%,
-    var(--matcha-color-surface-card) 100%
-  );
-  --matcha-gradient-banner-success: linear-gradient(
-    90deg,
-    var(--matcha-color-success-alpha) 0%,
-    var(--matcha-color-surface-card) 100%
-  );
-  --matcha-gradient-banner-warning: linear-gradient(
-    90deg,
-    var(--matcha-color-warn-alpha) 0%,
-    var(--matcha-color-surface-card) 100%
-  );
-  --matcha-gradient-banner-accent: linear-gradient(
-    90deg,
-    var(--matcha-color-accent-alpha) 0%,
-    var(--matcha-color-surface-card) 100%
-  );
-  --matcha-gradient-banner-danger: linear-gradient(
-    90deg,
-    var(--matcha-color-danger-alpha) 0%,
-    var(--matcha-color-surface-card) 100%
-  );
-}