@inchurch/matcha-theme 20.0.3

package/tokens/_css-custom-properties.scss

@@ -0,0 +1,568 @@
+// =============================================================================
+// 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);
+}

package/tokens/_elevation-tokens.scss

@@ -0,0 +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-";