@inchurch/matcha-theme 21.3.3 → 22.0.0

package/tokens/_color-tokens.scss

@@ -1,261 +1,274 @@
-@use "../abstracts/functions" as *;
-// =============================================================================
-// MATCHA — TOKENS DE COR (papéis semânticos por modo) · SINCRONIZADO DO FIGMA
-// =============================================================================
-// NÃO ajuste COR à mão. Fonte: tokens/matcha/colors/{Light,Dark}.json (Tokens Studio).
-// Sincronizado por scripts/matcha-tokens/sync-tokens.js — gate: sync-tokens.js --check.
-// Mudar cor: edite no Figma/tokens e rode  sync-tokens.js --write [--adopt-drift].
-// Comentários, ordem e chaves PASSTHROUGH (sem fonte JSON) são curados — esses pode editar.
-// Consumido por _emit-tokens.scss (emissor) e por abstracts/_theme-api.scss (define-theme).
-// =============================================================================
-@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);
-
+@use "../abstracts/functions" as *;
+// =============================================================================
+// MATCHA — TOKENS DE COR (papéis semânticos por modo) · SINCRONIZADO DO FIGMA
+// =============================================================================
+// NÃO ajuste COR à mão. Fonte: tokens/matcha/colors/{Light,Dark}.json (Tokens Studio).
+// Sincronizado por scripts/matcha-tokens/sync-tokens.js — gate: sync-tokens.js --check.
+// Mudar cor: edite no Figma/tokens e rode  sync-tokens.js --write [--adopt-drift].
+// Comentários, ordem e chaves PASSTHROUGH (sem fonte JSON) são curados — esses pode editar.
+// Consumido por _emit-tokens.scss (emissor) e por abstracts/_theme-api.scss (define-theme).
+// =============================================================================
+@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),
+
+  // Chart contrast (texto sobre a série, AA ≥ 4.5 nos 2 modos) + alpha (fill 10%).
+  // Completam a paleta chart pra uso em pílula/badge/superfície (ex.: níveis da tree-view).
+  chart-series-1-contrast: (light: #ffffff,           dark: rgba(0, 0, 0, .87)),
+  chart-series-2-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
+  chart-series-3-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
+  chart-series-4-contrast: (light: rgba(0, 0, 0, .87), dark: rgba(0, 0, 0, .87)),
+  chart-series-5-contrast: (light: #ffffff,           dark: rgba(0, 0, 0, .87)),
+  chart-series-1-alpha:    (light: rgba(#615ce5, .1), dark: rgba(#8782f2, .1)),
+  chart-series-2-alpha:    (light: rgba(#42a147, .1), dark: rgba(#66ba6b, .1)),
+  chart-series-3-alpha:    (light: rgba(#ed6645, .1), dark: rgba(#f5876b, .1)),
+  chart-series-4-alpha:    (light: rgba(#c28700, .1), dark: rgba(#ffc93d, .1)),
+  chart-series-5-alpha:    (light: rgba(#008094, .1), dark: rgba(#26c2d9, .1)),
+);
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 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);
+

package/tokens/_elevation-tokens.scss

@@ -1,33 +1,33 @@
-// =============================================================================
-// Elevation Tokens — Aligned with Figma matcha/elevation/level-{1-4}
-// =============================================================================
-
-// ── Semantic shadow levels (3-layer Figma spec: accent glow + ambient + key) ──
-// Light mode: top layer usa tinta accent (rgba(45,122,47,..)) pra identidade da marca,
-//             camadas intermediárias/base usam tint escuro (#1A2C1E) pra profundidade
-// Dark mode: continua preto puro (ambiente já escuro)
-//
-// Spec 1:1 com Figma matcha/elevation/level-{1-4} — DS-PAINEL nodes.
-
-// Level 1: Cards elevados padrão (hero card, side cards) — Figma hero-card shadow
-$shadow-1-light: 0 8px 24px -8px rgba(45, 122, 47, 0.04), 0 2px 8px -1px rgba(26, 44, 30, 0.08), 0 1px 2px rgba(26, 44, 30, 0.04);
-$shadow-1-dark:  0 1px 2px rgba(0, 0, 0, 0.10), 0 2px 6px -1px rgba(0, 0, 0, 0.15);
-
-// Level 2: Cards destacados (playground, feature cards) — Figma playground-card shadow
-$shadow-2-light: 0 12px 32px -10px rgba(45, 122, 47, 0.05), 0 4px 16px -2px rgba(26, 44, 30, 0.10), 0 2px 4px -1px rgba(26, 44, 30, 0.05);
-$shadow-2-dark:  0 2px 4px -1px rgba(0, 0, 0, 0.10), 0 4px 16px -2px rgba(0, 0, 0, 0.20);
-
-// Level 3: Modals, drawers, side panels
-$shadow-3-light: 0 16px 40px -12px rgba(45, 122, 47, 0.06), 0 12px 32px -4px rgba(26, 44, 30, 0.14), 0 4px 8px -2px rgba(26, 44, 30, 0.08);
-$shadow-3-dark:  0 4px 8px -2px rgba(0, 0, 0, 0.15), 0 12px 32px -4px rgba(0, 0, 0, 0.30);
-
-// Level 4: Tooltips, command palette, notifications
-$shadow-4-light: 0 24px 48px -16px rgba(45, 122, 47, 0.08), 0 24px 48px -8px rgba(26, 44, 30, 0.18), 0 8px 16px -4px rgba(26, 44, 30, 0.10);
-$shadow-4-dark:  0 8px 16px -4px rgba(0, 0, 0, 0.20), 0 24px 48px -8px rgba(0, 0, 0, 0.40);
-
-// ── Legacy elevation system (Material Design 0-24) — kept for retrocompatibility ──
-$elevation-transition-duration: 280ms !default;
-$elevation-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$elevation-color: black !default;
-$elevation-opacity: 1 !default;
-$elevation-prefix: "elevation-z-";
+// =============================================================================
+// Elevation Tokens — Aligned with Figma matcha/elevation/level-{1-4}
+// =============================================================================
+
+// ── Semantic shadow levels (3-layer Figma spec: accent glow + ambient + key) ──
+// Light mode: top layer usa tinta accent (rgba(45,122,47,..)) pra identidade da marca,
+//             camadas intermediárias/base usam tint escuro (#1A2C1E) pra profundidade
+// Dark mode: continua preto puro (ambiente já escuro)
+//
+// Spec 1:1 com Figma matcha/elevation/level-{1-4} — DS-PAINEL nodes.
+
+// Level 1: Cards elevados padrão (hero card, side cards) — Figma hero-card shadow
+$shadow-1-light: 0 8px 24px -8px rgba(45, 122, 47, 0.04), 0 2px 8px -1px rgba(26, 44, 30, 0.08), 0 1px 2px rgba(26, 44, 30, 0.04);
+$shadow-1-dark:  0 1px 2px rgba(0, 0, 0, 0.10), 0 2px 6px -1px rgba(0, 0, 0, 0.15);
+
+// Level 2: Cards destacados (playground, feature cards) — Figma playground-card shadow
+$shadow-2-light: 0 12px 32px -10px rgba(45, 122, 47, 0.05), 0 4px 16px -2px rgba(26, 44, 30, 0.10), 0 2px 4px -1px rgba(26, 44, 30, 0.05);
+$shadow-2-dark:  0 2px 4px -1px rgba(0, 0, 0, 0.10), 0 4px 16px -2px rgba(0, 0, 0, 0.20);
+
+// Level 3: Modals, drawers, side panels
+$shadow-3-light: 0 16px 40px -12px rgba(45, 122, 47, 0.06), 0 12px 32px -4px rgba(26, 44, 30, 0.14), 0 4px 8px -2px rgba(26, 44, 30, 0.08);
+$shadow-3-dark:  0 4px 8px -2px rgba(0, 0, 0, 0.15), 0 12px 32px -4px rgba(0, 0, 0, 0.30);
+
+// Level 4: Tooltips, command palette, notifications
+$shadow-4-light: 0 24px 48px -16px rgba(45, 122, 47, 0.08), 0 24px 48px -8px rgba(26, 44, 30, 0.18), 0 8px 16px -4px rgba(26, 44, 30, 0.10);
+$shadow-4-dark:  0 8px 16px -4px rgba(0, 0, 0, 0.20), 0 24px 48px -8px rgba(0, 0, 0, 0.40);
+
+// ── Legacy elevation system (Material Design 0-24) — kept for retrocompatibility ──
+$elevation-transition-duration: 280ms !default;
+$elevation-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$elevation-color: black !default;
+$elevation-opacity: 1 !default;
+$elevation-prefix: "elevation-z-";