@inchurch/matcha-theme 20.0.8 → 20.276.0

package/tokens/_css-custom-properties.scss

@@ -1,568 +1,650 @@
-// =============================================================================
-// MATCHA DESIGN SYSTEM — Token Source (CSS Custom Properties)
-// =============================================================================
-//
-// Emits :root variables for Light mode + [data-theme="dark"] overrides,
-// enabling runtime theming without Sass recompilation.
-//
-// 1:1 PARIDADE com Figma variables em DS-PAINEL (fileKey K673r19KQE8lm2S74nQ5ob):
-//   - matcha/primitives  (99 vars)  →  primitives section below
-//   - matcha/colors      (117 vars) →  semantic color sections 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`
-//
-// ORDEM DO ARQUIVO (escalável, do mais genérico → mais específico):
-//   1. Surface (camadas de fundo)
-//   2. Text (cores de texto semântico)
-//   3. Icon
-//   4. Interaction (disabled, focus)
-//   5. Neutral
-//   6. Elevation (surface layers + shadow)
-//   7. Brand — Accent primário + Accent-2 secundário
-//   8. Brand — Primary
-//   9. Feedback — Success, Danger, Warn, Info
-//  10. Data — Chart series + decorative palette
-//  11. Typography — font/size/weight/leading/tracking
-//  12. Spacing / Radius / Border
-//  13. Motion / Opacity / State layers
-//  14. Icon sizes / Touch targets / Avatar
-//  15. Layout — Z-index / Grid
-//  16. Naming-parity aliases (Figma→CSS onde os nomes divergem)
-//
-// =============================================================================
-@use "sass:map";
-
-@mixin matcha-css-custom-properties($theme) {
-  $is-dark: map.get($theme, is-dark);
-  $bg: map.get($theme, background);
-  $fg: map.get($theme, foreground);
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // LIGHT = Figma oficial (matcha/color/* JSON export hierárquico)
-  // DARK  = tokens confirmados pelo usuário (flat JSON)
-  // ═════════════════════════════════════════════════════════════════════════
-
-  // ── Surface (9) — matcha/color/surface/* ─────────────────────────────────
-  // Light mode: sage-tinted neutrals (2–4% green hue da marca) + hierarquia perceptível
-  --matcha-color-surface-bg: #{if($is-dark, #111318, #f1f4f1)};
-  --matcha-color-surface-bg-alpha: #{if($is-dark, rgba(#111318, .5), rgba(#f1f4f1, .5))};
-  --matcha-color-surface-bg-inverse: #{if($is-dark, #f1f4f1, #111318)};
-  --matcha-color-surface-bg-inverse-alpha: #{if($is-dark, rgba(#f1f4f1, .5), rgba(#111318, .5))};
-
-  --matcha-color-surface: #{if($is-dark, #1c1f26, #ffffff)};
-  --matcha-color-surface-card: #{if($is-dark, #1c1f26, #ffffff)};
-  // Canvas aninhada dentro de card (preview stage, code body, inset panels)
-  // Light: sage (= bg da page, cria recorte sutil sobre card branco)
-  // Dark: mais clara que card (inverte lógica, dá profundidade em vez de buraco)
-  --matcha-color-surface-inner: #{if($is-dark, #262a32, #f1f4f1)};
-  --matcha-color-surface-card-alpha: #{if($is-dark, rgba(#1c1f26, .5), rgba(#ffffff, .85))};
-  --matcha-color-surface-card-inverse: #{if($is-dark, #ffffff, #1c1f26)};
-
-  --matcha-color-surface-sidebar: #{if($is-dark, #0d0f14, #e4ebe5)};
-  --matcha-color-surface-sidebar-hover: #{if($is-dark, #161920, #d8e1da)};
-  --matcha-color-surface-table-row-hover: #{if($is-dark, #1a1e25, #eff5f0)};
-
-  // Border sólido e visível (era rgba(0,0,0,.08) = invisível sobre sage bg)
-  --matcha-color-surface-border: #{if($is-dark, rgba(255,255,255,.12), #e1e7e2)};
-  // Border mais forte pra cards elevados (hero, playground — com shadow)
-  --matcha-color-surface-border-strong: #{if($is-dark, rgba(255,255,255,.24), #c8d2ca)};
-  --matcha-color-surface-hover: #{if($is-dark, rgba(#111318, .5), rgba(#e4ebe5, .5))};
-
-  // Aliases (flat) — usados massivamente
-  --matcha-color-bg: #{if($is-dark, #111318, #f1f4f1)};
-  --matcha-color-fg: #{if($is-dark, #e8eaed, #1a1d21)};
-  --matcha-color-fg-alpha: #{if($is-dark, rgba(#e8eaed, .5), rgba(#1a1d21, .5))};
-  --matcha-color-fg-inverse: #{if($is-dark, #1a1d21, #e8eaed)};
-  --matcha-color-fg-inverse-alpha: #{if($is-dark, rgba(#1a1d21, .5), rgba(#e8eaed, .5))};
-  --matcha-color-border: #{if($is-dark, rgba(255,255,255,.12), #e1e7e2)};
-
-  // ── Text (9) — matcha/color/text/* ───────────────────────────────────────
-  // Light mode: tudo sólido (antes era rgba misturado) — evita lama sobre bg tintado
-  --matcha-color-text-primary: #{if($is-dark, #e8eaed, #1a1d21)};
-  --matcha-color-text-inverse: #{if($is-dark, #1a1d21, #e8eaed)};
-  --matcha-color-text-secondary: #{if($is-dark, rgba(255,255,255,.7), #4a5056)};
-  // Muted: tintado com hue da marca pra recuar visualmente sem baixar contraste
-  // (Figma VariableID:17111:11 — matcha/color/text/muted)
-  --matcha-color-text-muted: #{if($is-dark, #a8b5a0, #5a6a5e)};
-  --matcha-color-text-label: #{if($is-dark, #bdc1c6, #6b7177)};
-  --matcha-color-text-placeholder: #{if($is-dark, #6e747a, #9aa0a6)};
-  --matcha-color-text-hint: #{if($is-dark, #9aa0a6, #6b7177)};
-  --matcha-color-text-static-light: #ffffff;
-  --matcha-color-text-static-dark: #1a1d21;
-
-  // ── Icon (2) — matcha/color/icon/* ───────────────────────────────────────
-  --matcha-color-icon-default: #{if($is-dark, #9aa0a6, #5f656b)};
-  --matcha-color-icon-active: #{if($is-dark, #e8eaed, #1a1d21)};
-
-  // ── Interaction (4) — matcha/color/interaction/* ─────────────────────────
-  // Light mode: disabled sólido com sage tint (antes alpha sobre bg = inconsistente)
-  --matcha-color-interaction-disabled-bg: #{if($is-dark, #282c34, #cfd6d1)};
-  --matcha-color-interaction-disabled-bg-alpha: #{if($is-dark, rgba(#282c34, .5), rgba(#cfd6d1, .5))};
-  --matcha-color-interaction-disabled-fg: #{if($is-dark, rgba(#e8eaed, .38), #8a9090)};
-  --matcha-color-interaction-disabled-border: #{if($is-dark, rgba(#e8eaed, .38), #c8d2ca)};
-  --matcha-color-focus-ring: #{if($is-dark, #a8d94e, #43a047)};
-  // Aliases legados
-  --matcha-color-disabled: #{if($is-dark, #282c34, #cfd6d1)};
-  --matcha-color-disabled-fg: #{if($is-dark, rgba(#e8eaed, .38), #8a9090)};
-  --matcha-color-disabled-border: #{if($is-dark, rgba(#e8eaed, .38), #c8d2ca)};
-  --matcha-color-disabled-bg: #{if($is-dark, #282c34, #cfd6d1)};
-
-  // ── 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.
-  --matcha-color-neutral: #{if($is-dark, #282c34, #e4ebe5)};
-  --matcha-color-neutral-contrast: #{if($is-dark, #e8eaed, #1a1d21)};
-  --matcha-color-neutral-alpha: #{if($is-dark, rgba(#e8eaed, .1), rgba(#1a1d21, .08))};
-  --matcha-color-neutral-hover: #{if($is-dark, #333842, #d8e1da)};
-
-  // ── Elevation (6) — matcha/color/elevation/* ─────────────────────────────
-  --matcha-color-elevation-surface-1: #{if($is-dark, #1c1f26, #f8faf8)};   // cards, dropdowns (sage)
-  --matcha-color-elevation-surface-2: #{if($is-dark, #262a32, #ffffff)};   // menus, floating
-  --matcha-color-elevation-surface-3: #{if($is-dark, #2e333c, #ffffff)};   // modals, drawers
-  // Shadow base: Figma light usa tinta accent #1A2C1E (não preto puro), dark usa #000000
-  --matcha-color-elevation-shadow: #{if($is-dark, #000000, #1a2c1e)};
-  --matcha-color-elevation-shadow-tint: #{if($is-dark, #000000, #1a2c1e)};  // tint da marca pra shadows light
-  --matcha-color-elevation-scrim: #000000;
-  // Figma matcha/color/state-layer/fg (camada sobre interações)
-  --matcha-color-state-layer-fg: #{if($is-dark, #ffffff, #000000)};
-
-  // ── Accent (10) — matcha/color/accent/* ──────────────────────────────────
-  // Light #2d7a2f (dark green) | Dark #a8d94e (lima A400)
-  // Light mode: verde puro #009400 — hue 120° (green clássico, sem hint yellow/olive)
-  // IMPORTANTE: Figma matcha/button usa matcha/color/text/inverse (= #E8EAED branco) como label,
-  // NÃO accent/contrast. Mantendo accent-contrast = branco aqui pra o código bater visualmente com Figma.
-  // Dark mode: preto em cima do lima bright (~11:1 AAA)
-  --matcha-color-accent: #{if($is-dark, #a8d94e, #009400)};
-  --matcha-color-accent-contrast: #{if($is-dark, rgba(0,0,0,.87), #E8EAED)};
-  --matcha-color-accent-contrast-alpha: #{if($is-dark, rgba(0,0,0,.12), rgba(255,255,255,.20))};
-  // 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).
-  --matcha-color-accent-text-on: #{if($is-dark, #1a1d21, #ffffff)};
-  --matcha-color-accent-alpha: #{if($is-dark, rgba(#a8d94e, .1), rgba(#009400, .1))};
-  // Light/dark auxiliares: Material Green 200/800 (decorativo, mais neutro que derivar do #009400)
-  --matcha-color-accent-light: #{if($is-dark, #b9f6ca, #a5d6a7)};
-  --matcha-color-accent-dark: #{if($is-dark, #c5e1a5, #2e7d32)};
-  --matcha-color-accent-hover: #{if($is-dark, #bee57a, #008400)};
-  --matcha-color-accent-pressed: #{if($is-dark, #d4eea0, #007400)};
-  --matcha-color-accent-surface-hover: #{if($is-dark, #161e12, #d4ecd4)};
-  --matcha-color-accent-surface-pressed: #{if($is-dark, #1f2d18, #bcdfbc)};
-
-  // ── Accent Secondary (teal — 4 tokens Figma matcha/color/accent-2/*) ─────
-  // Light #00796b (teal-700) | Dark #4fb7ad (teal-light)
-  --matcha-color-accent-2: #{if($is-dark, #4fb7ad, #00796b)};
-  --matcha-color-accent-2-contrast: #ffffff;
-  --matcha-color-accent-2-alpha: #{if($is-dark, rgba(#4fb7ad, .12), rgba(#00796b, .10))};
-  --matcha-color-accent-2-surface: #{if($is-dark, #1d332e, #e0f0ee)};
-
-  // ── Primary (10) — matcha/color/primary/* ────────────────────────────────
-  // Light #1664c2 (blue-700) | Dark #64b5f6 (blue-300)
-  --matcha-color-primary: #{if($is-dark, #64b5f6, #1664c2)};
-  --matcha-color-primary-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-primary-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-primary-alpha: #{if($is-dark, rgba(#64b5f6, .1), rgba(#1664c2, .1))};
-  --matcha-color-primary-light: #{if($is-dark, #bbdefb, #b3d7fd)};
-  --matcha-color-primary-dark: #{if($is-dark, #90caf9, #0d3c8c)};
-  --matcha-color-primary-hover: #{if($is-dark, #90caf9, #2576d2)};
-  --matcha-color-primary-pressed: #{if($is-dark, #bbdefb, #378ce1)};
-  --matcha-color-primary-surface-hover: #{if($is-dark, #141922, #e4eefa)};
-  --matcha-color-primary-surface-pressed: #{if($is-dark, #1a2436, #cddef5)};
-
-  // ── Feedback — Success (9) ───────────────────────────────────────────────
-  --matcha-color-success: #{if($is-dark, #69f0ae, #2e7d32)};
-  --matcha-color-success-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-success-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-success-alpha: #{if($is-dark, rgba(#69f0ae, .1), rgba(#2e7d32, .1))};
-  --matcha-color-success-hover: #{if($is-dark, #4cd992, #388e3c)};
-  --matcha-color-success-pressed: #{if($is-dark, #33c078, #43a047)};
-  --matcha-color-success-fill: #{if($is-dark, #43a047, #2e7d32)};
-  --matcha-color-success-surface-hover: #{if($is-dark, #121d17, #e8f5e9)};
-  --matcha-color-success-surface-pressed: #{if($is-dark, #192f24, #c8e6c9)};
-
-  // ── Feedback — Danger (9) ────────────────────────────────────────────────
-  --matcha-color-danger: #{if($is-dark, #ef9a9a, #c81010)};
-  --matcha-color-danger-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-danger-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-danger-alpha: #{if($is-dark, rgba(#ef9a9a, .1), rgba(#c81010, .1))};
-  --matcha-color-danger-hover: #{if($is-dark, #f4b8b8, #da2c2c)};
-  --matcha-color-danger-pressed: #{if($is-dark, #f7d0d0, #e64848)};
-  --matcha-color-danger-fill: #{if($is-dark, #e53935, #c81010)};
-  --matcha-color-danger-surface-hover: #{if($is-dark, #1d1616, #fae8e8)};
-  --matcha-color-danger-surface-pressed: #{if($is-dark, #2f2121, #f5d2d2)};
-
-  // ── Feedback — Warn (9) ──────────────────────────────────────────────────
-  // Light #a64e00 (âmbar escuro) | Dark #ffb74d (orange-300)
-  --matcha-color-warn: #{if($is-dark, #ffb74d, #a64e00)};
-  --matcha-color-warn-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
-  --matcha-color-warn-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
-  --matcha-color-warn-alpha: #{if($is-dark, rgba(#ffb74d, .1), rgba(#a64e00, .1))};
-  --matcha-color-warn-hover: #{if($is-dark, #e69f33, #924200)};
-  --matcha-color-warn-pressed: #{if($is-dark, #cc881a, #7e3600)};
-  --matcha-color-warn-fill: #{if($is-dark, #fb8c00, #a64e00)};
-  --matcha-color-warn-surface-hover: #{if($is-dark, #1e1910, #fcf0e1)};
-  --matcha-color-warn-surface-pressed: #{if($is-dark, #2f2616, #f8e1c3)};
-
-  // ── Feedback — Info (8) ──────────────────────────────────────────────────
-  --matcha-color-info: #{if($is-dark, #4090d8, #0a2fc2)};
-  --matcha-color-info-contrast: #ffffff;
-  --matcha-color-info-contrast-alpha: rgba(255,255,255,.1);
-  --matcha-color-info-alpha: #{if($is-dark, rgba(#4090d8, .1), rgba(#0a2fc2, .1))};
-  --matcha-color-info-hover: #{if($is-dark, #5aa0e0, #294cd4)};
-  --matcha-color-info-pressed: #{if($is-dark, #74b0e8, #4265e0)};
-  --matcha-color-info-surface-hover: #{if($is-dark, #0f141e, #ebeefa)};
-  --matcha-color-info-surface-pressed: #{if($is-dark, #131f31, #d8def5)};
-
-  // ── Palette (18) — matcha/color/palette/* ────────────────────────────────
-  --matcha-color-palette-teal: #{if($is-dark, #4fb7ad, #00796b)};
-  --matcha-color-palette-teal-light: #{if($is-dark, #009688, #4fb7ad)};
-  --matcha-color-palette-teal-alpha: #{if($is-dark, rgba(#4fb7ad, .1), rgba(#00796b, .1))};
-  --matcha-color-palette-light-blue: #{if($is-dark, #54c5f7, #0288d1)};
-  --matcha-color-palette-light-blue-light: #{if($is-dark, #03a9f4, #54c5f7)};
-  --matcha-color-palette-light-blue-alpha: #{if($is-dark, rgba(#54c5f7, .1), rgba(#0288d1, .1))};
-  --matcha-color-palette-purple: #{if($is-dark, #bb6ac8, #9c27b0)};
-  --matcha-color-palette-purple-light: #{if($is-dark, #9c27b0, #bb6ac8)};
-  --matcha-color-palette-purple-alpha: #{if($is-dark, rgba(#bb6ac8, .1), rgba(#9c27b0, .1))};
-  --matcha-color-palette-pink: #{if($is-dark, #e46291, #d81b60)};
-  --matcha-color-palette-pink-light: #{if($is-dark, #d81b60, #e46291)};
-  --matcha-color-palette-pink-alpha: #{if($is-dark, rgba(#e46291, .1), rgba(#d81b60, .1))};
-  --matcha-color-palette-orange: #{if($is-dark, #f9a25d, #e65100)};
-  --matcha-color-palette-orange-light: #{if($is-dark, #f77814, #f9a25d)};
-  --matcha-color-palette-orange-alpha: #{if($is-dark, rgba(#f9a25d, .1), rgba(#e65100, .1))};
-  --matcha-color-palette-yellow: #{if($is-dark, #efd64f, #ffa000)};
-  --matcha-color-palette-yellow-light: #{if($is-dark, #e8c300, #efd64f)};
-  --matcha-color-palette-yellow-alpha: #{if($is-dark, rgba(#efd64f, .1), rgba(#ffa000, .1))};
-
-  // ── Chart (5) — matcha/color/chart/* ─────────────────────────────────────
-  --matcha-color-chart-series-1: #{if($is-dark, #8782f2, #615ce5)};
-  --matcha-color-chart-series-2: #{if($is-dark, #66ba6b, #42a147)};
-  --matcha-color-chart-series-3: #{if($is-dark, #f5876b, #ed6645)};
-  --matcha-color-chart-series-4: #{if($is-dark, #ffc93d, #c28700)};
-  --matcha-color-chart-series-5: #{if($is-dark, #26c2d9, #008094)};
-
-  // ── 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-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 (8 tokens — matches matcha/font/size/* from Figma) ──────────
-  --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;
-
-  // ── Font weight (6 tokens — matches matcha/font/weight/* exato) ──────────
-  // Canônico Figma: 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-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 composites (18 text styles from Figma) ────────────────────
-  --matcha-text-display: 32px;
-  --matcha-text-headline: 24px;
-  --matcha-text-title-xl: 20px;
-  --matcha-text-title-lg: 20px;
-  --matcha-text-title-md: 18px;
-  --matcha-text-title-sm: 16px;
-  --matcha-text-title-xs: 14px;
-  --matcha-text-body-lg: 16px;
-  --matcha-text-body-md: 14px;
-  --matcha-text-body-sm: 12px;
-  --matcha-text-label-lg: 16px;
-  --matcha-text-label-md: 14px;
-  --matcha-text-label-sm: 12px;
-  --matcha-text-button-lg: 16px;  // SemiBold 22 letter 0.2
-  --matcha-text-button-md: 14px;  // Medium 20 letter 0.2
-  --matcha-text-button-sm: 13px;  // Medium 19 letter 0.2 (Figma instance usage)
-  --matcha-text-caption: 11px;
-  --matcha-text-overline: 10px;
-
-  // Novos text styles (paridade 1:1 com matcha/text/* no Figma)
-  --matcha-text-display-hero: 36px;
-  --matcha-text-display-xl: 40px;
-  --matcha-text-display-sm: 28px;
-  --matcha-text-title-xl: 20px;   // ExtraBold — distinto de title-lg (SemiBold)
-  --matcha-text-title-xs: 14px;
-  --matcha-text-body-premium: 14px;
-  --matcha-text-nav-section: 11px;
-  --matcha-text-section-label: 11px;
-  --matcha-text-overline-status: 11px;
-  --matcha-text-stat-number: 20px;
-  --matcha-text-stat-label: 13px;
-  --matcha-text-wordmark: 16px;
-  --matcha-text-card-title: 14px;
-  --matcha-text-badge-sm: 11px;
-
-  // Shorthand aliases (usados massivamente em components/*.scss)
-  // Mapeiam para os text styles canônicos do Figma.
-  --matcha-text-xs: var(--matcha-text-caption);   // 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 (matching Figma text styles exactly)
-  --matcha-leading-display: 40px;
-  --matcha-leading-headline: 32px;
-  --matcha-leading-title-xl: 28px;
-  --matcha-leading-title-lg: 28px;
-  --matcha-leading-title-md: 24px;
-  --matcha-leading-title-sm: 22px;
-  --matcha-leading-title-xs: 20px;
-  --matcha-leading-body-lg: 24px;
-  --matcha-leading-body-md: 20px;
-  --matcha-leading-body-sm: 16px;
-  --matcha-leading-label-lg: 22px;
-  --matcha-leading-label-md: 20px;
-  --matcha-leading-label-sm: 16px;
-  --matcha-leading-button-lg: 22px;
-  --matcha-leading-button-md: 20px;
-  --matcha-leading-button-sm: 19px;  // Atualizado p/ 19 (antes 16, descri\u00e7\u00e3o Figma mentia)
-  --matcha-leading-caption: 14px;
-  --matcha-leading-overline: 14px;
-
-  // Leading — novos text styles
-  --matcha-leading-display-hero: 40px;
-  --matcha-leading-display-xl: 48px;
-  --matcha-leading-display-sm: 36px;
-  --matcha-leading-title-xs: 20px;
-  --matcha-leading-body-premium: 20px;
-  --matcha-leading-nav-section: 16px;
-  --matcha-leading-section-label: 16px;
-  --matcha-leading-overline-status: 14px;
-  --matcha-leading-stat-number: 24px;
-  --matcha-leading-stat-label: 18px;
-  --matcha-leading-wordmark: 20px;
-  --matcha-leading-card-title: 20px;
-  --matcha-leading-badge-sm: 14px;
-
-  // Tracking (letter-spacing) — por style (só quem tem valor não-zero)
-  --matcha-tracking-display-hero: -1.2px;
-  --matcha-tracking-display-xl: -0.5px;
-  --matcha-tracking-body-premium: -0.1px;
-  --matcha-tracking-overline-status: 0.5px;
-  --matcha-tracking-stat-number: -0.3px;
-  --matcha-tracking-wordmark: -0.3px;
-  --matcha-tracking-badge-sm: 0.3px;
-
-  // Shorthand aliases para line-heights (acompanham --matcha-text-*)
-  --matcha-leading-xs: var(--matcha-leading-caption);   // 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)};
-
-  // ── 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-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;
-
-  // ── 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-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;
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // 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);
-
-  // Figma: matcha/font/weight/semi-bold → ↔ --matcha-weight-semibold
-  --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);
-}
+// =============================================================================
+// MATCHA DESIGN SYSTEM — Token Source (CSS Custom Properties)
+// =============================================================================
+//
+// Emits :root variables for Light mode + [data-theme="dark"] overrides,
+// enabling runtime theming without Sass recompilation.
+//
+// 1:1 PARIDADE com Figma variables em DS-PAINEL (fileKey K673r19KQE8lm2S74nQ5ob):
+//   - matcha/primitives  (99 vars)  →  primitives section below
+//   - matcha/colors      (117 vars) →  semantic color sections 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`
+//
+// ORDEM DO ARQUIVO (escalável, do mais genérico → mais específico):
+//   1. Surface (camadas de fundo)
+//   2. Text (cores de texto semântico)
+//   3. Icon
+//   4. Interaction (disabled, focus)
+//   5. Neutral
+//   6. Elevation (surface layers + shadow)
+//   7. Brand — Accent primário + Accent-2 secundário
+//   8. Brand — Primary
+//   9. Feedback — Success, Danger, Warn, Info
+//  10. Data — Chart series + decorative palette
+//  11. Typography — font/size/weight/leading/tracking
+//  12. Spacing / Radius / Border
+//  13. Motion / Opacity / State layers
+//  14. Icon sizes / Touch targets / Avatar
+//  15. Layout — Z-index / Grid
+//  16. Naming-parity aliases (Figma→CSS onde os nomes divergem)
+//
+// =============================================================================
+@use "sass:map";
+
+@mixin matcha-css-custom-properties($theme) {
+  $is-dark: map.get($theme, is-dark);
+  $bg: map.get($theme, background);
+  $fg: map.get($theme, foreground);
+
+  // ═════════════════════════════════════════════════════════════════════════
+  // LIGHT = Figma oficial (matcha/color/* JSON export hierárquico)
+  // DARK  = tokens confirmados pelo usuário (flat JSON)
+  // ═════════════════════════════════════════════════════════════════════════
+
+  // ── 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.
+  --matcha-color-surface-bg: #{if($is-dark, #111318, #f1f4f1)};
+  // 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.
+  --matcha-color-surface-bg-alpha: #{if($is-dark, rgba(#111318, .5), rgba(#f0f2f5, .5))};
+  --matcha-color-surface-bg-inverse: #{if($is-dark, #f0f2f5, #111318)};
+  --matcha-color-surface-bg-inverse-alpha: #{if($is-dark, rgba(#f0f2f5, .5), rgba(#111318, .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.
+  --matcha-color-surface: #{if($is-dark, #1c1f26, #f7fcf7)};
+  --matcha-color-surface-card: #{if($is-dark, #1c1f26, #f7fcf7)};
+  // 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.
+  --matcha-color-surface-card-strong: #{if($is-dark, #262a32, #ffffff)};
+  // 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)
+  --matcha-color-surface-inner: #{if($is-dark, #262a32, #f1f4f1)};
+  // card-alpha light usa #ffffff base (não #f7fcf7) — overlay/zebra com white puro
+  --matcha-color-surface-card-alpha: #{if($is-dark, rgba(#1c1f26, .5), rgba(#ffffff, .85))};
+  --matcha-color-surface-card-inverse: #{if($is-dark, #ffffff, #1c1f26)};
+
+  --matcha-color-surface-sidebar: #{if($is-dark, #0d0f14, #e4ebe5)};
+  --matcha-color-surface-sidebar-hover: #{if($is-dark, #161920, #d8e1da)};
+  // table-row-hover light: neutral #f4f4f4 (Figma — não tinted sage)
+  --matcha-color-surface-table-row-hover: #{if($is-dark, #151a22, #f4f4f4)};
+
+  // Border sólido e visível (era rgba(0,0,0,.08) = invisível sobre sage bg)
+  --matcha-color-surface-border: #{if($is-dark, rgba(255,255,255,.12), #e1e7e2)};
+  // Border mais forte pra cards elevados (hero, playground — com shadow)
+  --matcha-color-surface-border-strong: #{if($is-dark, rgba(255,255,255,.24), #c8d2ca)};
+  --matcha-color-surface-hover: #{if($is-dark, rgba(#111318, .5), rgba(#e4ebe5, .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.
+  --matcha-color-bg: #{if($is-dark, #111318, #f1f4f1)};
+  --matcha-color-fg: #{if($is-dark, #e8eaed, #2a2d33)};
+  --matcha-color-fg-alpha: #{if($is-dark, rgba(#e8eaed, .5), rgba(#2a2d33, .5))};
+  --matcha-color-fg-inverse: #{if($is-dark, #2a2d33, #e8eaed)};
+  --matcha-color-fg-inverse-alpha: #{if($is-dark, rgba(#2a2d33, .5), rgba(#e8eaed, .5))};
+  --matcha-color-border: #{if($is-dark, rgba(255,255,255,.12), #e1e7e2)};
+
+  // ── 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)
+  --matcha-color-text-primary: #{if($is-dark, #e8eaed, #2a2d33)};
+  --matcha-color-text-inverse: #{if($is-dark, #2a2d33, #e8eaed)};
+  --matcha-color-text-secondary: #{if($is-dark, rgba(255,255,255,.7), #5a6066)};
+  // Muted: GitHub-ish neutral (antes era sage-tinted #5a6a5e — verde demais em form helper text)
+  --matcha-color-text-muted: #{if($is-dark, #a8b5a0, #6e7681)};
+  --matcha-color-text-label: #{if($is-dark, #bdc1c6, #7a818a)};
+  // Placeholder: #7a818a (4.5:1 sobre card — passa AA mantendo low-emphasis)
+  --matcha-color-text-placeholder: #{if($is-dark, #6e747a, #7a818a)};
+  --matcha-color-text-hint: #{if($is-dark, #9aa0a6, #7a818a)};
+  --matcha-color-text-static-light: #ffffff;
+  --matcha-color-text-static-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
+  --matcha-color-icon-default: #{if($is-dark, #9aa0a6, #75767a)};
+  --matcha-color-icon-active: #{if($is-dark, #e8eaed, #3d4248)};
+
+  // ── Interaction (4) — matcha/color/interaction/* ─────────────────────────
+  // Light mode: disabled sólido com sage tint (antes alpha sobre bg = inconsistente)
+  --matcha-color-interaction-disabled-bg: #{if($is-dark, #282c34, #cfd6d1)};
+  --matcha-color-interaction-disabled-bg-alpha: #{if($is-dark, rgba(#282c34, .5), rgba(#cfd6d1, .5))};
+  --matcha-color-interaction-disabled-fg: #{if($is-dark, rgba(#e8eaed, .38), #8a9090)};
+  --matcha-color-interaction-disabled-border: #{if($is-dark, rgba(#e8eaed, .38), #c8d2ca)};
+  --matcha-color-focus-ring: #{if($is-dark, #a8d94e, #43a047)};
+  // Aliases legados
+  --matcha-color-disabled: #{if($is-dark, #282c34, #cfd6d1)};
+  --matcha-color-disabled-fg: #{if($is-dark, rgba(#e8eaed, .38), #8a9090)};
+  --matcha-color-disabled-border: #{if($is-dark, rgba(#e8eaed, .38), #c8d2ca)};
+  --matcha-color-disabled-bg: #{if($is-dark, #282c34, #cfd6d1)};
+
+  // ── 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.
+  --matcha-color-neutral: #{if($is-dark, #282c34, #e4ebe5)};
+  --matcha-color-neutral-contrast: #{if($is-dark, #e8eaed, #1a1d21)};
+  --matcha-color-neutral-alpha: #{if($is-dark, rgba(#e8eaed, .1), rgba(#1a1d21, .08))};
+  --matcha-color-neutral-hover: #{if($is-dark, #333842, #d8e1da)};
+
+  // ── Elevation (6) — matcha/color/elevation/* ─────────────────────────────
+  --matcha-color-elevation-surface-1: #{if($is-dark, #1c1f26, #f8faf8)};   // cards, dropdowns (sage)
+  --matcha-color-elevation-surface-2: #{if($is-dark, #262a32, #ffffff)};   // menus, floating
+  --matcha-color-elevation-surface-3: #{if($is-dark, #2e333c, #ffffff)};   // modals, drawers
+  // Shadow base: Figma light usa tinta accent #1A2C1E (não preto puro), dark usa #000000
+  --matcha-color-elevation-shadow: #{if($is-dark, #000000, #1a2c1e)};
+  --matcha-color-elevation-shadow-tint: #{if($is-dark, #000000, #1a2c1e)};  // tint da marca pra shadows light
+  --matcha-color-elevation-scrim: #000000;
+  // Figma matcha/color/state-layer/fg (camada sobre interações)
+  --matcha-color-state-layer-fg: #{if($is-dark, #ffffff, #000000)};
+
+  // ── 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).
+  --matcha-color-accent: #{if($is-dark, #a8d94e, #54a71d)};
+  --matcha-color-accent-contrast: rgba(0,0,0,.87);
+  --matcha-color-accent-contrast-alpha: 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).
+  --matcha-color-accent-text-on: #{if($is-dark, #1a1d21, #ffffff)};
+  --matcha-color-accent-alpha: #{if($is-dark, rgba(#a8d94e, .1), rgba(#54a71d, .1))};
+  // Light/dark auxiliares: spring green tint (hue 143° matching accent base)
+  --matcha-color-accent-light: #{if($is-dark, #b9f6ca, #b9e3a3)};
+  --matcha-color-accent-dark: #{if($is-dark, #c5e1a5, #3a7515)};
+  // Hover/pressed: step ~10% darker mesma hue (3.0:1 → 3.75:1 → 4.7:1)
+  --matcha-color-accent-hover: #{if($is-dark, #bee57a, #4b9519)};
+  --matcha-color-accent-pressed: #{if($is-dark, #d4eea0, #428316)};
+  // Surface tints — light spring green
+  --matcha-color-accent-surface-hover: #{if($is-dark, #161e12, #e8f3dc)};
+  --matcha-color-accent-surface-pressed: #{if($is-dark, #1f2d18, #cbe4ab)};
+
+  // ── Accent Secondary (teal — 4 tokens Figma matcha/color/accent-2/*) ─────
+  // Light #00796b (teal-700) | Dark #4fb7ad (teal-light)
+  --matcha-color-accent-2: #{if($is-dark, #4fb7ad, #00796b)};
+  --matcha-color-accent-2-contrast: #ffffff;
+  --matcha-color-accent-2-alpha: #{if($is-dark, rgba(#4fb7ad, .12), rgba(#00796b, .10))};
+  --matcha-color-accent-2-surface: #{if($is-dark, #1d332e, #e0f0ee)};
+
+  // ── Primary (10) — matcha/color/primary/* ────────────────────────────────
+  // Light #1664c2 (blue-700) | Dark #64b5f6 (blue-300)
+  --matcha-color-primary: #{if($is-dark, #64b5f6, #1664c2)};
+  --matcha-color-primary-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
+  --matcha-color-primary-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
+  --matcha-color-primary-alpha: #{if($is-dark, rgba(#64b5f6, .1), rgba(#1664c2, .1))};
+  --matcha-color-primary-light: #{if($is-dark, #bbdefb, #b3d7fd)};
+  --matcha-color-primary-dark: #{if($is-dark, #90caf9, #0d3c8c)};
+  --matcha-color-primary-hover: #{if($is-dark, #90caf9, #2576d2)};
+  --matcha-color-primary-pressed: #{if($is-dark, #bbdefb, #378ce1)};
+  --matcha-color-primary-surface-hover: #{if($is-dark, #141922, #e4eefa)};
+  --matcha-color-primary-surface-pressed: #{if($is-dark, #1a2436, #cddef5)};
+
+  // ── Feedback — Success (9) ───────────────────────────────────────────────
+  --matcha-color-success: #{if($is-dark, #69f0ae, #2e7d32)};
+  --matcha-color-success-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
+  --matcha-color-success-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
+  --matcha-color-success-alpha: #{if($is-dark, rgba(#69f0ae, .1), rgba(#2e7d32, .1))};
+  --matcha-color-success-hover: #{if($is-dark, #4cd992, #388e3c)};
+  --matcha-color-success-pressed: #{if($is-dark, #33c078, #43a047)};
+  --matcha-color-success-fill: #{if($is-dark, #43a047, #2e7d32)};
+  --matcha-color-success-surface-hover: #{if($is-dark, #121d17, #e8f5e9)};
+  --matcha-color-success-surface-pressed: #{if($is-dark, #192f24, #c8e6c9)};
+
+  // ── Feedback — Danger (9) ────────────────────────────────────────────────
+  --matcha-color-danger: #{if($is-dark, #ef9a9a, #c81010)};
+  --matcha-color-danger-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
+  --matcha-color-danger-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
+  --matcha-color-danger-alpha: #{if($is-dark, rgba(#ef9a9a, .1), rgba(#c81010, .1))};
+  --matcha-color-danger-hover: #{if($is-dark, #f4b8b8, #da2c2c)};
+  --matcha-color-danger-pressed: #{if($is-dark, #f7d0d0, #e64848)};
+  --matcha-color-danger-fill: #{if($is-dark, #e53935, #c81010)};
+  --matcha-color-danger-surface-hover: #{if($is-dark, #1d1616, #fae8e8)};
+  --matcha-color-danger-surface-pressed: #{if($is-dark, #2f2121, #f5d2d2)};
+
+  // ── Feedback — Warn (9) ──────────────────────────────────────────────────
+  // Light #a64e00 (âmbar escuro) | Dark #ffb74d (orange-300)
+  --matcha-color-warn: #{if($is-dark, #ffb74d, #a64e00)};
+  --matcha-color-warn-contrast: #{if($is-dark, rgba(0,0,0,.87), #ffffff)};
+  --matcha-color-warn-contrast-alpha: #{if($is-dark, rgba(0,0,0,.1), rgba(255,255,255,.1))};
+  --matcha-color-warn-alpha: #{if($is-dark, rgba(#ffb74d, .1), rgba(#a64e00, .1))};
+  --matcha-color-warn-hover: #{if($is-dark, #e69f33, #924200)};
+  --matcha-color-warn-pressed: #{if($is-dark, #cc881a, #7e3600)};
+  --matcha-color-warn-fill: #{if($is-dark, #fb8c00, #a64e00)};
+  --matcha-color-warn-surface-hover: #{if($is-dark, #1e1910, #fcf0e1)};
+  --matcha-color-warn-surface-pressed: #{if($is-dark, #2f2616, #f8e1c3)};
+
+  // ── Feedback — Info (8) ──────────────────────────────────────────────────
+  --matcha-color-info: #{if($is-dark, #4090d8, #0a2fc2)};
+  --matcha-color-info-contrast: #ffffff;
+  --matcha-color-info-contrast-alpha: rgba(255,255,255,.1);
+  --matcha-color-info-alpha: #{if($is-dark, rgba(#4090d8, .1), rgba(#0a2fc2, .1))};
+  --matcha-color-info-hover: #{if($is-dark, #5aa0e0, #294cd4)};
+  --matcha-color-info-pressed: #{if($is-dark, #74b0e8, #4265e0)};
+  --matcha-color-info-surface-hover: #{if($is-dark, #0f141e, #ebeefa)};
+  --matcha-color-info-surface-pressed: #{if($is-dark, #131f31, #d8def5)};
+
+  // ── 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);
+
+  // ── Palette (18) — matcha/color/palette/* ────────────────────────────────
+  --matcha-color-palette-teal: #{if($is-dark, #4fb7ad, #00796b)};
+  --matcha-color-palette-teal-light: #{if($is-dark, #009688, #4fb7ad)};
+  --matcha-color-palette-teal-alpha: #{if($is-dark, rgba(#4fb7ad, .1), rgba(#00796b, .1))};
+  --matcha-color-palette-light-blue: #{if($is-dark, #54c5f7, #0288d1)};
+  --matcha-color-palette-light-blue-light: #{if($is-dark, #03a9f4, #54c5f7)};
+  --matcha-color-palette-light-blue-alpha: #{if($is-dark, rgba(#54c5f7, .1), rgba(#0288d1, .1))};
+  --matcha-color-palette-purple: #{if($is-dark, #bb6ac8, #9c27b0)};
+  --matcha-color-palette-purple-light: #{if($is-dark, #9c27b0, #bb6ac8)};
+  --matcha-color-palette-purple-alpha: #{if($is-dark, rgba(#bb6ac8, .1), rgba(#9c27b0, .1))};
+  --matcha-color-palette-pink: #{if($is-dark, #e46291, #d81b60)};
+  --matcha-color-palette-pink-light: #{if($is-dark, #d81b60, #e46291)};
+  --matcha-color-palette-pink-alpha: #{if($is-dark, rgba(#e46291, .1), rgba(#d81b60, .1))};
+  --matcha-color-palette-orange: #{if($is-dark, #f9a25d, #e65100)};
+  --matcha-color-palette-orange-light: #{if($is-dark, #f77814, #f9a25d)};
+  --matcha-color-palette-orange-alpha: #{if($is-dark, rgba(#f9a25d, .1), rgba(#e65100, .1))};
+  --matcha-color-palette-yellow: #{if($is-dark, #efd64f, #ffa000)};
+  --matcha-color-palette-yellow-light: #{if($is-dark, #e8c300, #efd64f)};
+  --matcha-color-palette-yellow-alpha: #{if($is-dark, rgba(#efd64f, .1), rgba(#ffa000, .1))};
+
+  // ── Chart (5) — matcha/color/chart/* ─────────────────────────────────────
+  --matcha-color-chart-series-1: #{if($is-dark, #8782f2, #615ce5)};
+  --matcha-color-chart-series-2: #{if($is-dark, #66ba6b, #42a147)};
+  --matcha-color-chart-series-3: #{if($is-dark, #f5876b, #ed6645)};
+  --matcha-color-chart-series-4: #{if($is-dark, #ffc93d, #c28700)};
+  --matcha-color-chart-series-5: #{if($is-dark, #26c2d9, #008094)};
+
+  // ── 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)};
+
+  // ── 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%
+  );
+}