ds-tis 1.0.0-beta.10

package/css/tokens/generated/foundation.css

@@ -0,0 +1,282 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --ds-color-brand-50: #EEF6FF;
+  --ds-color-brand-100: #DAEAFE;
+  --ds-color-brand-200: #BCDCFE;
+  --ds-color-brand-300: #8EC6FD;
+  --ds-color-brand-400: #56A7FA;
+  --ds-color-brand-500: #2884F7;
+  --ds-color-brand-600: #0065ED;
+  --ds-color-brand-700: #0050DA;
+  --ds-color-brand-800: #0C42B1;
+  --ds-color-brand-900: #143B8B;
+  --ds-color-brand-950: #132655;
+  --ds-color-neutral-50: #F8FAFC;
+  --ds-color-neutral-100: #F1F5F9;
+  --ds-color-neutral-200: #E2E8F0;
+  --ds-color-neutral-300: #CBD5E1;
+  --ds-color-neutral-400: #94A3B8;
+  --ds-color-neutral-500: #64748B;
+  --ds-color-neutral-600: #475569;
+  --ds-color-neutral-700: #334155;
+  --ds-color-neutral-800: #1E293B;
+  --ds-color-neutral-900: #0F172A;
+  --ds-color-neutral-950: #070C17;
+  --ds-color-blue-50: #EFF6FF;
+  --ds-color-blue-100: #DBEAFE;
+  --ds-color-blue-200: #BFDBFE;
+  --ds-color-blue-300: #93C5FD;
+  --ds-color-blue-400: #60A5FA;
+  --ds-color-blue-500: #3B82F6;
+  --ds-color-blue-600: #2563EB;
+  --ds-color-blue-700: #1D4ED8;
+  --ds-color-blue-800: #1E40AF;
+  --ds-color-blue-900: #1E3A8A;
+  --ds-color-blue-950: #172554;
+  --ds-color-purple-50: #FAF5FF;
+  --ds-color-purple-100: #F3E8FF;
+  --ds-color-purple-200: #E9D5FF;
+  --ds-color-purple-300: #D8B4FE;
+  --ds-color-purple-400: #C084FC;
+  --ds-color-purple-500: #A855F7;
+  --ds-color-purple-600: #9333EA;
+  --ds-color-purple-700: #7E22CE;
+  --ds-color-purple-800: #6B21A8;
+  --ds-color-purple-900: #581C87;
+  --ds-color-purple-950: #3B0764;
+  --ds-color-red-50: #FEF2F2;
+  --ds-color-red-100: #FEE2E2;
+  --ds-color-red-200: #FECACA;
+  --ds-color-red-300: #FCA5A5;
+  --ds-color-red-400: #F87171;
+  --ds-color-red-500: #EF4444;
+  --ds-color-red-600: #DC2626;
+  --ds-color-red-700: #B91C1C;
+  --ds-color-red-800: #991B1B;
+  --ds-color-red-900: #7F1D1D;
+  --ds-color-red-950: #450A0A;
+  --ds-color-amber-50: #FFF4E3;
+  --ds-color-amber-100: #FFE3B5;
+  --ds-color-amber-200: #FFCA78;
+  --ds-color-amber-300: #F1AA34;
+  --ds-color-amber-400: #D28800;
+  --ds-color-amber-500: #BB7500;
+  --ds-color-amber-600: #A06400;
+  --ds-color-amber-700: #835400;
+  --ds-color-amber-800: #694400;
+  --ds-color-amber-900: #533601;
+  --ds-color-amber-950: #2E1C01;
+  --ds-color-green-50: #EDF9EF;
+  --ds-color-green-100: #D5F2D9;
+  --ds-color-green-200: #AEE6B9;
+  --ds-color-green-300: #75D28B;
+  --ds-color-green-400: #30B65D;
+  --ds-color-green-500: #009F42;
+  --ds-color-green-600: #008535;
+  --ds-color-green-700: #006F2D;
+  --ds-color-green-800: #035926;
+  --ds-color-green-900: #07461E;
+  --ds-color-green-950: #02240C;
+  --ds-color-sky-50: #F0F9FF;
+  --ds-color-sky-100: #E0F2FE;
+  --ds-color-sky-200: #BAE6FD;
+  --ds-color-sky-300: #7DD3FC;
+  --ds-color-sky-400: #38BDF8;
+  --ds-color-sky-500: #0EA5E9;
+  --ds-color-sky-600: #0284C7;
+  --ds-color-sky-700: #0369A1;
+  --ds-color-sky-800: #075985;
+  --ds-color-sky-900: #0C4A6E;
+  --ds-color-sky-950: #082F49;
+  --ds-color-cyan-50: #ECFEFF;
+  --ds-color-cyan-100: #CFFAFE;
+  --ds-color-cyan-200: #A5F3FC;
+  --ds-color-cyan-300: #67E8F9;
+  --ds-color-cyan-400: #22D3EE;
+  --ds-color-cyan-500: #06B6D4;
+  --ds-color-cyan-600: #0891B2;
+  --ds-color-cyan-700: #0E7490;
+  --ds-color-cyan-800: #155E75;
+  --ds-color-cyan-900: #164E63;
+  --ds-color-cyan-950: #083344;
+  --ds-color-emerald-50: #ECFDF5;
+  --ds-color-emerald-100: #D1FAE5;
+  --ds-color-emerald-200: #A7F3D0;
+  --ds-color-emerald-300: #6EE7B7;
+  --ds-color-emerald-400: #34D399;
+  --ds-color-emerald-500: #10B981;
+  --ds-color-emerald-600: #059669;
+  --ds-color-emerald-700: #047857;
+  --ds-color-emerald-800: #065F46;
+  --ds-color-emerald-900: #064E3B;
+  --ds-color-emerald-950: #022C22;
+  --ds-color-indigo-50: #EEF2FF;
+  --ds-color-indigo-100: #E0E7FF;
+  --ds-color-indigo-200: #C7D2FE;
+  --ds-color-indigo-300: #A5B4FC;
+  --ds-color-indigo-400: #818CF8;
+  --ds-color-indigo-500: #6366F1;
+  --ds-color-indigo-600: #4F46E5;
+  --ds-color-indigo-700: #4338CA;
+  --ds-color-indigo-800: #3730A3;
+  --ds-color-indigo-900: #312E81;
+  --ds-color-indigo-950: #1E1B4B;
+  --ds-overlay-black-5: rgba(0, 0, 0, 0.05);
+  --ds-overlay-black-10: rgba(0, 0, 0, 0.1);
+  --ds-overlay-black-20: rgba(0, 0, 0, 0.2);
+  --ds-overlay-black-40: rgba(0, 0, 0, 0.4);
+  --ds-overlay-black-60: rgba(0, 0, 0, 0.6);
+  --ds-overlay-black-80: rgba(0, 0, 0, 0.8);
+  --ds-overlay-white-5: rgba(255, 255, 255, 0.05);
+  --ds-overlay-white-10: rgba(255, 255, 255, 0.1);
+  --ds-overlay-white-20: rgba(255, 255, 255, 0.2);
+  --ds-overlay-white-40: rgba(255, 255, 255, 0.4);
+  --ds-overlay-white-60: rgba(255, 255, 255, 0.6);
+  --ds-overlay-white-80: rgba(255, 255, 255, 0.8);
+  --ds-overlay-brand-600-12: rgba(0, 101, 237, 0.12); /** Brand-600 at 12% opacity. Toned default in light mode. */
+  --ds-overlay-brand-600-20: rgba(0, 101, 237, 0.20); /** Brand-600 at 20% opacity. Toned hover in light mode. */
+  --ds-overlay-brand-600-28: rgba(0, 101, 237, 0.28); /** Brand-600 at 28% opacity. Toned active in light mode. */
+  --ds-overlay-brand-400-15: rgba(86, 167, 250, 0.15); /** Brand-400 at 15% opacity. Toned default in dark mode. */
+  --ds-overlay-brand-400-25: rgba(86, 167, 250, 0.25); /** Brand-400 at 25% opacity. Toned hover in dark mode. */
+  --ds-overlay-brand-400-32: rgba(86, 167, 250, 0.32); /** Brand-400 at 32% opacity. Toned active in dark mode. */
+  --ds-color-disabled-brand-light: rgba(86, 167, 250, 0.5); /** Disabled fill for Button Brand in light mode. */
+  --ds-color-disabled-brand-dark: rgba(79, 99, 125, 0.4); /** Disabled fill for Button Brand in dark mode (pre-blended opaque). */
+  --ds-color-disabled-brand-toned-light: rgba(218, 234, 254, 0.2); /** Disabled fill for Button Brand Toned in light mode. */
+  --ds-color-disabled-brand-toned-dark: rgba(79, 99, 125, 0.2); /** Disabled fill for Button Brand Toned in dark mode. */
+  --ds-color-disabled-success-light: rgba(122, 184, 145, 0.5); /** Disabled fill for Button Success in light mode. */
+  --ds-color-disabled-success-dark: rgba(72, 110, 85, 0.4); /** Disabled fill for Button Success in dark mode. */
+  --ds-color-disabled-error-light: rgba(194, 112, 112, 0.4); /** Disabled fill for Button Danger/Error in light mode. */
+  --ds-color-disabled-error-dark: rgba(123, 80, 80, 0.4); /** Disabled fill for Button Danger/Error in dark mode. */
+  --ds-color-transparent: rgba(0, 0, 0, 0); /** Cor totalmente transparente. Espelha Figma foundation/color/transparent. */
+  --ds-dimension-0: 0rem; /** 0px — ausência de espaço/dimensão. */
+  --ds-dimension-1: 0.0625rem; /** 1px — hairline para bordas, divisores e ajustes finos. */
+  --ds-dimension-2: 0.125rem; /** 2px */
+  --ds-dimension-4: 0.25rem; /** 4px */
+  --ds-dimension-6: 0.375rem; /** 6px */
+  --ds-dimension-8: 0.5rem; /** 8px */
+  --ds-dimension-10: 0.625rem; /** 10px — control deviation (vertical padding md). Off-grid by design. */
+  --ds-dimension-12: 0.75rem; /** 12px */
+  --ds-dimension-14: 0.875rem; /** 14px */
+  --ds-dimension-16: 1rem; /** 16px */
+  --ds-dimension-20: 1.25rem; /** 20px */
+  --ds-dimension-24: 1.5rem; /** 24px */
+  --ds-dimension-28: 1.75rem; /** 28px */
+  --ds-dimension-32: 2rem; /** 32px */
+  --ds-dimension-36: 2.25rem; /** 36px */
+  --ds-dimension-40: 2.5rem; /** 40px */
+  --ds-dimension-44: 2.75rem; /** 44px — WCAG 2.5.5 enhanced touch target */
+  --ds-dimension-48: 3rem; /** 48px */
+  --ds-dimension-56: 3.5rem; /** 56px */
+  --ds-dimension-64: 4rem; /** 64px */
+  --ds-dimension-80: 5rem; /** 80px */
+  --ds-dimension-88: 5.5rem; /** 88px — control deviation for medium button min-width. */
+  --ds-dimension-96: 6rem; /** 96px */
+  --ds-dimension-102: 6.375rem; /** 102px — control deviation for large button min-width. */
+  --ds-dimension-120: 7.5rem; /** 120px */
+  --ds-dimension-128: 8rem; /** 128px */
+  --ds-dimension-320: 20rem; /** 320px — layout scale */
+  --ds-dimension-480: 30rem; /** 480px — layout scale */
+  --ds-dimension-640: 40rem; /** 640px — layout scale */
+  --ds-dimension-800: 50rem; /** 800px — layout scale */
+  --ds-dimension-1024: 64rem; /** 1024px — layout scale */
+  --ds-dimension-1280: 80rem; /** 1280px — layout scale */
+  --ds-duration-instant: 0ms; /** 0ms. Sem animação (raro — sobrescrever em prefers-reduced-motion ou disable explícito). */
+  --ds-duration-fast: 150ms; /** 150ms. Transições rápidas (hover, focus, active). */
+  --ds-duration-moderate: 250ms; /** 250ms. Transições de estado mais elaboradas (toggle, drawer, expand/collapse). */
+  --ds-duration-slow: 400ms; /** 400ms. Animações enfáticas (entrada de overlay, modal, popover). */
+  --ds-duration-slower: 600ms; /** 600ms. Loops contínuos (Spinner) e animações enfáticas longas. */
+  --ds-ease-default: cubic-bezier(0.4, 0, 0.2, 1); /** Curva padrão pra transições UI. Mesmo valor de in-out — alias de conveniência. */
+  --ds-ease-in: cubic-bezier(0.4, 0, 1, 1); /** Aceleração no início, sem desaceleração. Use pra elementos saindo da tela. */
+  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1); /** Sem aceleração, desaceleração no final. Use pra elementos entrando na tela. */
+  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /** Aceleração + desaceleração. Padrão Material; mesmo valor de default. */
+  --ds-ease-linear: cubic-bezier(0, 0, 1, 1); /** Curva linear (velocidade constante). Para loops onde aceleração quebra a percepção (Spinner). */
+  --ds-opacity-5: 0.05;
+  --ds-opacity-10: 0.1;
+  --ds-opacity-25: 0.25;
+  --ds-opacity-50: 0.5;
+  --ds-opacity-75: 0.75;
+  --ds-opacity-100: 1;
+  --ds-radius-2: 0.125rem; /** 2px */
+  --ds-radius-4: 0.25rem; /** 4px */
+  --ds-radius-8: 0.5rem; /** 8px */
+  --ds-radius-12: 0.75rem; /** 12px */
+  --ds-radius-16: 1rem; /** 16px */
+  --ds-radius-24: 1.5rem; /** 24px */
+  --ds-radius-999: 999px; /** Pill/circle. Token name follows Figma. */
+  --ds-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+  --ds-shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
+  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
+  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -2px rgba(0, 0, 0, 0.1);
+  --ds-shadow-none: none;
+  --ds-border-width-1: 1px;
+  --ds-border-width-2: 2px;
+  --ds-border-width-4: 4px;
+  --ds-stroke-width-2: 2px; /** 2px icon stroke width. */
+  --ds-stroke-width-1_5: 1.5px; /** 1.5px icon stroke width. */
+  --ds-stroke-width-1_75: 1.75px; /** 1.75px icon stroke width. */
+  --ds-stroke-width-2_25: 2.25px; /** 2.25px icon stroke width. */
+  --ds-stroke-width-2_5: 2.5px; /** 2.5px icon stroke width. */
+  --ds-font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --ds-font-family-mono: 'DM Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
+  --ds-font-family-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /** Same as sans today. Reserved slot for future distinct display/heading font. */
+  --ds-font-size-11: 0.6875rem; /** 11px */
+  --ds-font-size-12: 0.75rem; /** 12px */
+  --ds-font-size-14: 0.875rem; /** 14px */
+  --ds-font-size-16: 1rem; /** 16px */
+  --ds-font-size-18: 1.125rem; /** 18px */
+  --ds-font-size-20: 1.25rem; /** 20px */
+  --ds-font-size-24: 1.5rem; /** 24px */
+  --ds-font-size-28: 1.75rem; /** 28px */
+  --ds-font-size-32: 2rem; /** 32px */
+  --ds-font-size-40: 2.5rem; /** 40px */
+  --ds-font-size-48: 3rem; /** 48px */
+  --ds-font-size-56: 3.5rem; /** 56px */
+  --ds-font-size-64: 4rem; /** 64px */
+  --ds-font-size-72: 4.5rem; /** 72px */
+  --ds-font-weight-regular: 400;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-semibold: 600;
+  --ds-font-weight-bold: 700;
+  --ds-line-height-16: 1rem; /** 16px */
+  --ds-line-height-18: 1.125rem; /** 18px */
+  --ds-line-height-20: 1.25rem; /** 20px */
+  --ds-line-height-22: 1.375rem; /** 22px */
+  --ds-line-height-24: 1.5rem; /** 24px */
+  --ds-line-height-26: 1.625rem; /** 26px */
+  --ds-line-height-28: 1.75rem; /** 28px */
+  --ds-line-height-32: 2rem; /** 32px. Pareia com font.size.20 (xl). */
+  --ds-line-height-34: 2.125rem; /** 34px */
+  --ds-line-height-40: 2.5rem; /** 40px */
+  --ds-line-height-44: 2.75rem; /** 44px */
+  --ds-line-height-48: 3rem; /** 48px. Pareia com font.size.40 (5xl). */
+  --ds-line-height-50: 3.125rem; /** 50px */
+  --ds-line-height-60: 3.75rem; /** 60px */
+  --ds-line-height-64: 4rem; /** 64px. Pareia com font.size.48 (6xl). */
+  --ds-line-height-70: 4.375rem; /** 70px */
+  --ds-line-height-72: 4.5rem; /** 72px. Pareia com font.size.56 (7xl). */
+  --ds-line-height-80: 5rem; /** 80px */
+  --ds-line-height-90: 5.625rem; /** 90px */
+  --ds-line-height-none: 1; /** Ratio legacy. Use em base/*.css apenas. Componente prefere numérico. */
+  --ds-line-height-tight: 1.25; /** Ratio legacy. Use em base/*.css apenas. */
+  --ds-line-height-snug: 1.375; /** Ratio legacy. Use em base/*.css apenas. */
+  --ds-line-height-normal: 1.5; /** Ratio legacy. Use em base/*.css apenas. */
+  --ds-line-height-relaxed: 1.625; /** Ratio legacy. Use em base/*.css apenas. */
+  --ds-line-height-loose: 1.75; /** Ratio legacy. Use em base/*.css apenas. */
+  --ds-line-height-control-sm: 1rem; /** 16px — matches icon-size sm. Single-line control line-height. */
+  --ds-line-height-control-md: 1.25rem; /** 20px — matches icon-size md. Single-line control line-height. */
+  --ds-line-height-control-lg: 1.5rem; /** 24px — matches icon-size lg. Single-line control line-height. */
+  --ds-letter-spacing-tighter: -0.05em;
+  --ds-letter-spacing-tight: -0.025em;
+  --ds-letter-spacing-normal: 0;
+  --ds-letter-spacing-wide: 0.025em;
+  --ds-letter-spacing-wider: 0.05em;
+  --ds-z-0: 0;
+  --ds-z-10: 10;
+  --ds-z-20: 20;
+  --ds-z-30: 30;
+  --ds-z-40: 40;
+  --ds-z-50: 50;
+}

package/css/tokens/generated/index.css

@@ -0,0 +1,5 @@
+/* Auto-generated — do not edit. Run: npm run build:tokens */
+@import 'foundation.css';
+@import 'theme-light.css';
+@import 'theme-dark.css';
+@import 'component.css';

package/css/tokens/generated/theme-dark.css

@@ -0,0 +1,243 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-mode="dark"] {
+  --ds-brand-content-default: var(--ds-color-neutral-900);
+  --ds-brand-content-hover: var(--ds-color-neutral-900); /** Conteúdo sobre fill primário em hover. */
+  --ds-brand-content-disabled: var(--ds-overlay-white-80);
+  --ds-brand-background-default: var(--ds-color-brand-400);
+  --ds-brand-background-hover: var(--ds-color-brand-500);
+  --ds-brand-background-active: var(--ds-color-brand-400);
+  --ds-brand-background-disabled: var(--ds-color-disabled-brand-light);
+  --ds-toned-content-default: var(--ds-color-brand-400);
+  --ds-toned-background-default: var(--ds-overlay-brand-400-15);
+  --ds-toned-background-hover: var(--ds-overlay-brand-400-25);
+  --ds-toned-background-active: var(--ds-overlay-brand-400-32);
+  --ds-toned-background-disabled: var(--ds-color-disabled-brand-toned-dark);
+  --ds-outline-content-default: var(--ds-color-neutral-300);
+  --ds-outline-content-disabled: var(--ds-color-neutral-600);
+  --ds-outline-border-default: var(--ds-color-neutral-500);
+  --ds-outline-border-hover: var(--ds-color-neutral-300);
+  --ds-outline-border-disabled: var(--ds-color-neutral-800);
+  --ds-outline-background-hover: var(--ds-overlay-black-10);
+  --ds-outline-background-active: var(--ds-overlay-black-10);
+  --ds-ghost-content-default: var(--ds-color-neutral-50);
+  --ds-ghost-content-disabled: var(--ds-color-neutral-600);
+  --ds-ghost-background-hover: var(--ds-overlay-black-10);
+  --ds-ghost-background-active: var(--ds-overlay-black-10);
+  --ds-link-content-default: var(--ds-color-brand-400); /** Links em estado default. */
+  --ds-link-content-hover: var(--ds-color-brand-300); /** Links em estado hover. */
+  --ds-link-content-active: var(--ds-color-brand-200); /** Links em estado pressed (mousedown/active). Brand step abaixo de hover. */
+  --ds-link-content-disabled: var(--ds-color-neutral-600); /** Links em estado disabled. */
+  --ds-feedback-success-border-default: var(--ds-color-green-400);
+  --ds-feedback-success-content-default: var(--ds-color-green-300);
+  --ds-feedback-success-content-contrast: var(--ds-color-neutral-900); /** Dark text porque success default em dark é green-500 (claro). */
+  --ds-feedback-success-content-disabled: var(--ds-overlay-white-60); /** Conteúdo success disabled. */
+  --ds-feedback-success-background-default: var(--ds-color-green-400);
+  --ds-feedback-success-background-hover: var(--ds-color-green-500);
+  --ds-feedback-success-background-active: var(--ds-color-green-500);
+  --ds-feedback-success-background-subtle: var(--ds-color-green-900);
+  --ds-feedback-success-background-disabled: var(--ds-color-disabled-success-dark);
+  --ds-feedback-warning-border-default: var(--ds-color-amber-400);
+  --ds-feedback-warning-content-default: var(--ds-color-amber-300);
+  --ds-feedback-warning-content-contrast: var(--ds-color-amber-950);
+  --ds-feedback-warning-background-default: var(--ds-color-amber-300);
+  --ds-feedback-warning-background-hover: var(--ds-color-amber-500);
+  --ds-feedback-warning-background-subtle: var(--ds-color-amber-900);
+  --ds-feedback-error-border-default: var(--ds-color-red-400);
+  --ds-feedback-error-border-hover: var(--ds-color-red-500); /** Borda de feedback erro em estado hover. */
+  --ds-feedback-error-content-default: var(--ds-color-red-300);
+  --ds-feedback-error-content-contrast: var(--ds-color-neutral-900); /** Dark text porque error default em dark é red-500 (medium). */
+  --ds-feedback-error-content-disabled: var(--ds-overlay-white-60); /** Conteúdo error disabled. */
+  --ds-feedback-error-background-default: var(--ds-color-red-400);
+  --ds-feedback-error-background-hover: var(--ds-color-red-500);
+  --ds-feedback-error-background-active: var(--ds-color-red-400);
+  --ds-feedback-error-background-subtle: var(--ds-color-red-900);
+  --ds-feedback-error-background-disabled: var(--ds-color-disabled-error-dark);
+  --ds-feedback-error-content-strong: var(--ds-color-red-200); /** Conteudo error/destructive ativo com contraste reforcado para surfaces elevadas. */
+  --ds-feedback-info-border-default: var(--ds-color-blue-400);
+  --ds-feedback-info-content-default: var(--ds-color-blue-300);
+  --ds-feedback-info-content-contrast: var(--ds-color-brand-950);
+  --ds-feedback-info-background-default: var(--ds-color-blue-400);
+  --ds-feedback-info-background-hover: var(--ds-color-blue-500);
+  --ds-feedback-info-background-subtle: var(--ds-color-blue-900);
+  --ds-surface-default: var(--ds-color-neutral-900); /** Card and panel surfaces */
+  --ds-surface-hover: var(--ds-color-neutral-800); /** Surface neutra em hover de controles. */
+  --ds-surface-raised: var(--ds-color-neutral-800); /** Elevated surface (sticky headers, raised cards) */
+  --ds-surface-overlay: var(--ds-color-neutral-700);
+  --ds-surface-elevated: var(--ds-color-neutral-600);
+  --ds-background-default: var(--ds-color-neutral-950); /** Page background */
+  --ds-background-subtle: var(--ds-color-neutral-800); /** Subtle alternate background */
+  --ds-background-inverse: var(--ds-color-neutral-50);
+  --ds-background-overlay: var(--ds-overlay-black-60); /** Modal/dialog overlay backdrop */
+  --ds-background-disabled: var(--ds-color-neutral-900); /** Background de componentes em estado disabled (antes state.disabled.background). */
+  --ds-background-transparent: var(--ds-color-transparent); /** Fundo sem preenchimento. Usado por itens ghost-like (Pagination default/disabled). */
+  --ds-content-strong: var(--ds-color-neutral-50); /** Conteúdo de ênfase máxima (títulos, badge labels, modal title, active tab). Tom mais escuro/claro da escala. */
+  --ds-content-default: var(--ds-color-neutral-300); /** Conteúdo padrão (body text, descriptions, form labels). Use este na maioria dos casos. */
+  --ds-content-hover: var(--ds-color-neutral-300); /** Conteúdo neutro em hover. */
+  --ds-content-subtle: var(--ds-color-neutral-400); /** Conteúdo de ênfase reduzida (placeholders, ícones decorativos, helper text). */
+  --ds-content-disabled: var(--ds-color-neutral-600); /** Conteúdo em estado disabled. Isento de contraste WCAG. Unifica text/disabled e state/disabled/foreground (ADR-011). */
+  --ds-content-inverse: var(--ds-color-neutral-900);
+  --ds-content-brand: var(--ds-color-brand-400); /** Conteúdo brand sobre superfície neutra em dark mode (equivalente ao fill brand default). */
+  --ds-content-placeholder-rectangle-height-default: var(--ds-dimension-120); /** Altura padrão do placeholder retangular de conteúdo. */
+  --ds-content-placeholder-text-height-default: var(--ds-dimension-12); /** Altura padrão do placeholder textual de conteúdo. */
+  --ds-control-button-min-width-sm: var(--ds-dimension-80);
+  --ds-control-button-min-width-md: var(--ds-dimension-88);
+  --ds-control-button-min-width-lg: var(--ds-dimension-102);
+  --ds-control-radio-dot-size-sm: var(--ds-dimension-6);
+  --ds-control-radio-dot-size-md: var(--ds-dimension-8);
+  --ds-control-radio-dot-size-lg: var(--ds-dimension-10);
+  --ds-control-textarea-min-height-sm: var(--ds-dimension-80);
+  --ds-control-textarea-min-height-md: var(--ds-dimension-96);
+  --ds-control-textarea-min-height-lg: var(--ds-dimension-120);
+  --ds-control-toggle-height-sm: var(--ds-dimension-16);
+  --ds-control-toggle-height-md: var(--ds-dimension-24);
+  --ds-control-toggle-height-lg: var(--ds-dimension-32);
+  --ds-control-toggle-width-sm: var(--ds-dimension-28);
+  --ds-control-toggle-width-md: var(--ds-dimension-44);
+  --ds-control-toggle-width-lg: var(--ds-dimension-56);
+  --ds-control-toggle-thumb-gap: var(--ds-dimension-2);
+  --ds-control-toggle-thumb-size-sm: var(--ds-dimension-12);
+  --ds-control-toggle-thumb-size-md: var(--ds-dimension-20);
+  --ds-control-toggle-thumb-size-lg: var(--ds-dimension-28);
+  --ds-icon-stroke-width-regular-16: var(--ds-stroke-width-1_5);
+  --ds-icon-stroke-width-regular-20: var(--ds-stroke-width-1_75);
+  --ds-icon-stroke-width-regular-24: var(--ds-stroke-width-2);
+  --ds-icon-stroke-width-regular-32: var(--ds-stroke-width-2_5);
+  --ds-icon-stroke-width-strong-16: var(--ds-stroke-width-1_75);
+  --ds-icon-stroke-width-strong-20: var(--ds-stroke-width-2);
+  --ds-icon-stroke-width-strong-24: var(--ds-stroke-width-2_25);
+  --ds-border-default: var(--ds-color-neutral-700);
+  --ds-border-strong: var(--ds-color-neutral-500);
+  --ds-border-subtle: var(--ds-color-neutral-800);
+  --ds-border-inverse: var(--ds-color-neutral-900); /** Borda usada sobre fundos invertidos (claros em dark mode). */
+  --ds-border-width-default: var(--ds-border-width-1);
+  --ds-border-width-strong: var(--ds-border-width-2);
+  --ds-border-width-focus: var(--ds-border-width-2);
+  --ds-border-focus: var(--ds-color-brand-500);
+  --ds-border-brand: var(--ds-color-brand-500);
+  --ds-border-error: var(--ds-color-red-500);
+  --ds-border-focus-error: var(--ds-color-red-500);
+  --ds-border-control-default: var(--ds-color-neutral-500); /** Border color for interactive controls. Meets WCAG 1.4.11 (≥3:1 against dark surface). */
+  --ds-border-control-hover: var(--ds-color-brand-500); /** Border on hover for interactive controls in dark mode. */
+  --ds-border-control-disabled: var(--ds-color-neutral-800); /** Border for disabled controls in dark mode. Exempt from contrast requirements per WCAG 1.4.3. */
+  --ds-overlay-subtle: var(--ds-overlay-white-5);
+  --ds-overlay-default: var(--ds-overlay-white-10);
+  --ds-overlay-medium: var(--ds-overlay-white-20);
+  --ds-overlay-strong: var(--ds-overlay-white-40);
+  --ds-opacity-disabled: var(--ds-opacity-50); /** 50%. */
+  --ds-motion-duration-instant: var(--ds-duration-instant); /** 0ms — sem animação. */
+  --ds-motion-duration-fast: var(--ds-duration-fast); /** 150ms — hover, focus, active. */
+  --ds-motion-duration-moderate: var(--ds-duration-moderate); /** 250ms — toggle, drawer, expand/collapse. */
+  --ds-motion-duration-slow: var(--ds-duration-slow); /** 400ms — entrada de overlay, modal, popover. */
+  --ds-motion-duration-slower: var(--ds-duration-slower); /** 600ms — loops contínuos (Spinner). */
+  --ds-motion-ease-default: var(--ds-ease-default); /** Curva padrão (= in-out). */
+  --ds-motion-ease-in: var(--ds-ease-in); /** Aceleração no início. Elementos saindo da tela. */
+  --ds-motion-ease-out: var(--ds-ease-out); /** Desaceleração no final. Elementos entrando na tela. */
+  --ds-motion-ease-in-out: var(--ds-ease-in-out); /** Aceleração + desaceleração. Mesmo valor de default. */
+  --ds-motion-ease-linear: var(--ds-ease-linear); /** Velocidade constante. Loops (Spinner). */
+  --ds-space-none: var(--ds-dimension-0); /** 0px. Espaço zero para remover padding/gap mantendo alias semântico. */
+  --ds-space-2xs: var(--ds-dimension-2); /** 2px. Menor espaço semântico para ajustes finos de gap/padding. */
+  --ds-space-xs: var(--ds-dimension-4); /** 4px. Espaço compacto para relações muito próximas. */
+  --ds-space-sm: var(--ds-dimension-8); /** 8px. Espaço pequeno padrão para controles e conteúdo denso. */
+  --ds-space-md: var(--ds-dimension-12); /** 12px. Espaço médio para gaps internos e agrupamentos próximos. */
+  --ds-space-lg: var(--ds-dimension-16); /** 16px. Espaço confortável para padding e separação interna. */
+  --ds-space-xl: var(--ds-dimension-20); /** 20px. Espaço amplo para containers e componentes robustos. */
+  --ds-space-2xl: var(--ds-dimension-24); /** 24px. Espaço extra amplo para containers antes da escala expandida. */
+  --ds-space-3xl: var(--ds-dimension-32); /** 32px. Espaçamento amplo para composição interna de componentes e blocos densos. */
+  --ds-space-4xl: var(--ds-dimension-40); /** 40px. Espaçamento amplo para composição interna quando 32px ainda é curto. */
+  --ds-space-5xl: var(--ds-dimension-48); /** 48px. Limite alto para composição interna antes de entrar em escala de section. */
+  --ds-space-6xl: var(--ds-dimension-64); /** 64px. Espaçamento máximo da escala genérica; use section/* para respiro entre áreas. */
+  --ds-space-section-sm: var(--ds-dimension-48); /** 48px. Espaçamento compacto entre seções, acima da escala genérica comum. */
+  --ds-space-section-md: var(--ds-dimension-64); /** 64px. Espaçamento padrão entre seções de página, docs e specs. */
+  --ds-space-section-lg: var(--ds-dimension-80); /** 80px. Espaçamento amplo entre seções ou grupos editoriais. */
+  --ds-space-section-xl: var(--ds-dimension-96); /** 96px. Espaçamento extra amplo para separação de grandes áreas. */
+  --ds-space-section-2xl: var(--ds-dimension-120); /** 120px. Maior respiro de section previsto para páginas e documentação. */
+  --ds-space-control-padding-6: var(--ds-dimension-6); /** 6px. Padding simétrico de Icon Only sm Button. Único valor de control entre xs(4) e sm(8) que foge da escala space. */
+  --ds-space-control-padding-10: var(--ds-dimension-10); /** 10px. Padding-Y vertical de controles (Input/Button md). Único valor de control que foge da escala space (xs–2xl). */
+  --ds-space-hairline: var(--ds-dimension-1); /** 1px. Menor espaço semântico para bordas hairline, divisores e ajustes finos. */
+  --ds-size-xs: var(--ds-dimension-16); /** 16px. Inline icon em body text, indicator pequeno. */
+  --ds-size-sm: var(--ds-dimension-20); /** 20px. Icon padrão em controle, checkbox/radio sm. */
+  --ds-size-md: var(--ds-dimension-24); /** 24px. Icon grande, checkbox/radio md, avatar icon. */
+  --ds-size-lg: var(--ds-dimension-32); /** 32px. Control height sm, avatar md, spinner padrão. */
+  --ds-size-xl: var(--ds-dimension-40); /** 40px. Control height md (Button/Input/Select default), avatar lg. */
+  --ds-size-2xl: var(--ds-dimension-48); /** 48px. Control height lg, touch target a11y, avatar xl. */
+  --ds-size-3xl: var(--ds-dimension-64); /** 64px. Avatar 2xl, textarea sm, image placeholder. */
+  --ds-size-4xl: var(--ds-dimension-96); /** 96px. Textarea md, skeleton card. */
+  --ds-size-5xl: var(--ds-dimension-128); /** 128px. Textarea lg, skeleton hero. */
+  --ds-size-layout-xs: var(--ds-dimension-320); /** 320px. Mobile container, dropdown menu wide. */
+  --ds-size-layout-sm: var(--ds-dimension-480); /** 480px. Modal sm (form simples). */
+  --ds-size-layout-md: var(--ds-dimension-640); /** 640px. Modal md, content max-width. */
+  --ds-size-layout-lg: var(--ds-dimension-800); /** 800px. Modal lg, narrow page. */
+  --ds-size-layout-xl: var(--ds-dimension-1024); /** 1024px. Page container default. */
+  --ds-size-layout-2xl: var(--ds-dimension-1280); /** 1280px. Page max-width. */
+  --ds-shadow-card: var(--ds-shadow-sm);
+  --ds-shadow-overlay: var(--ds-shadow-md);
+  --ds-shadow-modal: var(--ds-shadow-xl);
+  --ds-radius-sm: var(--ds-radius-4);
+  --ds-radius-md: var(--ds-radius-8);
+  --ds-radius-lg: var(--ds-radius-12);
+  --ds-radius-xl: var(--ds-radius-16);
+  --ds-radius-full: var(--ds-radius-999);
+  --ds-body-font-family-sans: var(--ds-font-family-sans); /** Font-family sans-serif padrão do sistema. Usar em todo texto UI. */
+  --ds-body-font-family-mono: var(--ds-font-family-mono); /** Monospace pra code blocks e snippets. Espelha Figma typography/body/font-family/mono. */
+  --ds-body-font-weight-regular: var(--ds-font-weight-regular); /** Peso regular (400). */
+  --ds-body-font-weight-medium: var(--ds-font-weight-medium); /** Peso medium (500). */
+  --ds-body-font-weight-semibold: var(--ds-font-weight-semibold); /** Peso semibold (600). */
+  --ds-body-font-weight-bold: var(--ds-font-weight-bold); /** Peso bold (700). */
+  --ds-body-letter-spacing-normal: var(--ds-letter-spacing-normal); /** Letter-spacing neutro (0). */
+  --ds-body-letter-spacing-tight: var(--ds-letter-spacing-tight); /** Letter-spacing apertado (-0.02em). */
+  --ds-body-letter-spacing-wider: var(--ds-letter-spacing-wider); /** Letter-spacing expandido (1.5px). Usado em overline/uppercase. Espelha Figma typography/body/letter-spacing/wider. */
+  --ds-body-font-size-2xs: var(--ds-font-size-11); /** 11px. Caption, micro-text. Use sparingly — abaixo do mínimo recomendado WCAG 1.4.4. */
+  --ds-body-font-size-xs: var(--ds-font-size-12); /** 12px. Helper text, captions, secondary labels. */
+  --ds-body-font-size-sm: var(--ds-font-size-14); /** 14px. Body padrão, labels, descrições. WCAG 1.4.4 compliant. */
+  --ds-body-font-size-md: var(--ds-font-size-16); /** 16px. */
+  --ds-body-font-size-lg: var(--ds-font-size-18); /** 18px. */
+  --ds-body-font-size-xl: var(--ds-font-size-20); /** 20px. */
+  --ds-body-font-size-2xl: var(--ds-font-size-24); /** 24px. */
+  --ds-body-font-size-3xl: var(--ds-font-size-28); /** 28px. */
+  --ds-body-font-size-4xl: var(--ds-font-size-32); /** 32px. Heading xl, display. */
+  --ds-body-font-size-5xl: var(--ds-font-size-40); /** 40px. Display sm. */
+  --ds-body-font-size-6xl: var(--ds-font-size-48); /** 48px. Display md. */
+  --ds-body-font-size-7xl: var(--ds-font-size-56); /** 56px. Display lg. */
+  --ds-body-font-size-8xl: var(--ds-font-size-64); /** 64px. Display xl. */
+  --ds-body-font-size-9xl: var(--ds-font-size-72); /** 72px. Display 2xl. */
+  --ds-body-line-height-2xs: var(--ds-line-height-16); /** 16px. Pareia com body/font-size/2xs (11px) — ratio ~1.45. */
+  --ds-body-line-height-xs: var(--ds-line-height-18); /** 18px. Pareia com body/font-size/xs (12px) — ratio 1.5. */
+  --ds-body-line-height-sm: var(--ds-line-height-20); /** 20px. Pareia com body/font-size/sm (14px) — ratio 1.43. */
+  --ds-body-line-height-md: var(--ds-line-height-24); /** 24px. Pareia com body/font-size/md (16px) — ratio 1.5. */
+  --ds-body-line-height-lg: var(--ds-line-height-28); /** 28px. Pareia com body/font-size/lg (18px) — ratio 1.55. */
+  --ds-body-line-height-xl: var(--ds-line-height-32); /** 32px. Pareia com body/font-size/xl (20px) — ratio 1.6. */
+  --ds-body-line-height-2xl: var(--ds-line-height-34); /** 34px. Pareia com body/font-size/2xl (24px). */
+  --ds-body-line-height-3xl: var(--ds-line-height-40); /** 40px. Pareia com body/font-size/3xl (28px). */
+  --ds-body-line-height-4xl: var(--ds-line-height-44); /** 44px. Pareia com body/font-size/4xl (32px). */
+  --ds-body-line-height-5xl: var(--ds-line-height-48); /** 48px. Pareia com body/font-size/5xl (40px). */
+  --ds-body-line-height-6xl: var(--ds-line-height-64); /** 64px. Pareia com body/font-size/6xl (48px). */
+  --ds-body-line-height-7xl: var(--ds-line-height-72); /** 72px. Pareia com body/font-size/7xl (56px). */
+  --ds-body-line-height-8xl: var(--ds-line-height-80); /** 80px. Pareia com body/font-size/8xl (64px). */
+  --ds-body-line-height-9xl: var(--ds-line-height-90); /** 90px. Pareia com body/font-size/9xl (72px). */
+  --ds-z-modal: var(--ds-z-40); /** Stack layer para modais e overlays bloqueantes. */
+  --ds-z-tooltip: var(--ds-z-40); /** Stack layer para tooltips e floating labels não modais. */
+  --ds-brand-border-default: var(--ds-brand-background-default);
+  --ds-brand-border-hover: var(--ds-brand-background-hover);
+  --ds-brand-border-disabled: var(--ds-brand-background-disabled);
+  --ds-toned-content-disabled: var(--ds-content-disabled);
+  --ds-icon-color-default: var(--ds-content-default);
+  --ds-icon-color-hover: var(--ds-content-hover);
+  --ds-icon-color-active: var(--ds-content-strong);
+  --ds-icon-color-disabled: var(--ds-content-disabled);
+  --ds-icon-color-subtle: var(--ds-content-subtle);
+  --ds-icon-color-inverse: var(--ds-content-inverse);
+  --ds-icon-color-success: var(--ds-feedback-success-content-default);
+  --ds-icon-color-warning: var(--ds-feedback-warning-content-default);
+  --ds-icon-color-error: var(--ds-feedback-error-content-default);
+  --ds-icon-color-success-contrast: var(--ds-feedback-success-content-contrast);
+  --ds-icon-color-warning-contrast: var(--ds-feedback-warning-content-contrast);
+  --ds-icon-color-error-contrast: var(--ds-feedback-error-content-contrast);
+  --ds-icon-color-info-contrast: var(--ds-feedback-info-content-contrast);
+  --ds-icon-color-error-strong: var(--ds-feedback-error-content-strong); /** Icone error/destructive ativo pareado com feedback/error/content/strong. */
+  --ds-border-error-hover: var(--ds-feedback-error-border-hover);
+  --ds-border-overlay-default: var(--ds-overlay-default);
+  --ds-border-overlay-medium: var(--ds-overlay-medium);
+}