voa-ds-core 1.0.3

package/dist/voa/tokens/global.css

@@ -0,0 +1,867 @@
+@import "./voa-tokens.css";
+
+/* Design Tokens Mapping Documentation: See TOKENS-MAPPING.md */
+:root {
+  /* Cores Light */
+  --palette-gray-gray-9: #212529;
+  --palette-gray-gray-8: #343a40;
+  --palette-gray-gray-7: #495057;
+  --palette-gray-gray-6: #868e96;
+  --palette-gray-gray-5: #adb5bd;
+  --palette-gray-gray-4: #ced4da;
+  --palette-gray-gray-3: #dee2e6;
+  --palette-gray-gray-2: #e9ecef;
+  --palette-gray-gray-1: #f1f3f5;
+  --palette-gray-gray-0: #f8f9fa;
+  --palette-blue-blue-9: #1864ab;
+  --palette-blue-blue-8: #1971c2;
+  --palette-blue-blue-7: #1c7ed6;
+  --palette-blue-blue-6: #228be6;
+  --palette-blue-blue-5: #339af0;
+  --palette-blue-blue-4: #4dabf7;
+  --palette-blue-blue-3: #74c0fc;
+  --palette-blue-blue-2: #a5d8ff;
+  --palette-blue-blue-1: #d0ebff;
+  --palette-blue-blue-0: #e7f5ff;
+  --palette-red-red-9: #c92a2a;
+  --palette-red-red-8: #e03131;
+  --palette-red-red-7: #f03e3e;
+  --palette-red-red-6: #fa5252;
+  --palette-red-red-5: #ff6b6b;
+  --palette-red-red-4: #ff8787;
+  --palette-red-red-3: #ffa8a8;
+  --palette-red-red-2: #ffc9c9;
+  --palette-red-red-1: #ffe3e3;
+  --palette-red-red-0: #fff5f5;
+  --palette-pink-pink-9: #a61e4d;
+  --palette-pink-pink-8: #c2255c;
+  --palette-pink-pink-7: #d6336c;
+  --palette-pink-pink-6: #e64980;
+  --palette-pink-pink-5: #f06595;
+  --palette-pink-pink-4: #f783ac;
+  --palette-pink-pink-3: #faa2c1;
+  --palette-pink-pink-2: #fcc2d7;
+  --palette-pink-pink-1: #ffdeeb;
+  --palette-pink-pink-0: #fff0f6;
+  --palette-grape-grape-9: #862e9c;
+  --palette-grape-grape-8: #9c36b5;
+  --palette-grape-grape-7: #ae3ec9;
+  --palette-grape-grape-6: #be4bdb;
+  --palette-grape-grape-5: #cc5de8;
+  --palette-grape-grape-4: #da77f2;
+  --palette-grape-grape-3: #e599f7;
+  --palette-grape-grape-2: #eebefa;
+  --palette-grape-grape-1: #f3d9fa;
+  --palette-grape-grape-0: #f8f0fc;
+  --palette-violet-violet-9: #5f3dc4;
+  --palette-violet-violet-8: #6741d9;
+  --palette-violet-violet-7: #7048e8;
+  --palette-violet-violet-6: #7950f2;
+  --palette-violet-violet-5: #845ef7;
+  --palette-violet-violet-4: #9775fa;
+  --palette-violet-violet-3: #b197fc;
+  --palette-violet-violet-2: #d0bfff;
+  --palette-violet-violet-1: #e5dbff;
+  --palette-violet-violet-0: #f3f0ff;
+  --palette-indigo-indigo-9: #364fc7;
+  --palette-indigo-indigo-8: #3b5bdb;
+  --palette-indigo-indigo-7: #4263eb;
+  --palette-indigo-indigo-6: #4c6ef5;
+  --palette-indigo-indigo-5: #5c7cfa;
+  --palette-indigo-indigo-4: #748ffc;
+  --palette-indigo-indigo-3: #91a7ff;
+  --palette-indigo-indigo-2: #bac8ff;
+  --palette-indigo-indigo-1: #dbe4ff;
+  --palette-indigo-indigo-0: #edf2ff;
+  --palette-cyan-cyan-9: #0b7285;
+  --palette-cyan-cyan-8: #0c8599;
+  --palette-cyan-cyan-7: #1098ad;
+  --palette-cyan-cyan-6: #15aabf;
+  --palette-cyan-cyan-5: #22b8cf;
+  --palette-cyan-cyan-4: #3bc9db;
+  --palette-cyan-cyan-3: #66d9e8;
+  --palette-cyan-cyan-2: #99e9f2;
+  --palette-cyan-cyan-1: #c5f6fa;
+  --palette-cyan-cyan-0: #e3fafc;
+  --palette-teal-teal-9: #087f5b;
+  --palette-teal-teal-8: #099268;
+  --palette-teal-teal-7: #0ca678;
+  --palette-teal-teal-6: #12b886;
+  --palette-teal-teal-5: #20c997;
+  --palette-teal-teal-4: #38d9a9;
+  --palette-teal-teal-3: #63e6be;
+  --palette-teal-teal-2: #96f2d7;
+  --palette-teal-teal-1: #c3fae8;
+  --palette-teal-teal-0: #e6fcf5;
+  --palette-green-green-9: #2b8a3e;
+  --palette-green-green-8: #2f9e44;
+  --palette-green-green-7: #37b24d;
+  --palette-green-green-6: #40c057;
+  --palette-green-green-5: #51cf66;
+  --palette-green-green-4: #69db7c;
+  --palette-green-green-3: #8ce99a;
+  --palette-green-green-2: #b2f2bb;
+  --palette-green-green-1: #d3f9d8;
+  --palette-green-green-0: #ebfbee;
+  --palette-lime-lime-9: #5c940d;
+  --palette-lime-lime-8: #66a80f;
+  --palette-lime-lime-7: #74b816;
+  --palette-lime-lime-6: #82c91e;
+  --palette-lime-lime-5: #94d82d;
+  --palette-lime-lime-4: #a9e34b;
+  --palette-lime-lime-3: #c0eb75;
+  --palette-lime-lime-2: #d8f5a2;
+  --palette-lime-lime-1: #e9fac8;
+  --palette-lime-lime-0: #f4fce3;
+  --palette-yellow-yellow-9: #e67700;
+  --palette-yellow-yellow-8: #f08c00;
+  --palette-yellow-yellow-7: #f59f00;
+  --palette-yellow-yellow-6: #fab005;
+  --palette-yellow-yellow-5: #fcc419;
+  --palette-yellow-yellow-4: #ffd43b;
+  --palette-yellow-yellow-3: #ffe066;
+  --palette-yellow-yellow-2: #ffec99;
+  --palette-yellow-yellow-1: #fff3bf;
+  --palette-yellow-yellow-0: #fff9db;
+  --palette-orange-orange-9: #d9480f;
+  --palette-orange-orange-8: #e8590c;
+  --palette-orange-orange-7: #f76707;
+  --palette-orange-orange-6: #fd7e14;
+  --palette-orange-orange-5: #ff922b;
+  --palette-orange-orange-4: #ffa94d;
+  --palette-orange-orange-3: #ffc078;
+  --palette-orange-orange-2: #ffd8a8;
+  --palette-orange-orange-1: #ffe8cc;
+  --palette-orange-orange-0: #fff4e6;
+  --structure-colors-bg-base: #ffffff;
+  --structure-colors-bg-base-disabled: var(--palette-gray-gray-1);
+  --structure-colors-bg-container: var(--palette-gray-gray-1);
+  --structure-colors-bg-elevated: var(--palette-gray-gray-3);
+  --structure-colors-bg-layout: var(--palette-gray-gray-0);
+  --structure-colors-bg-spot: #000000;
+  --structure-colors-bg-mask: #000000;
+  --structure-colors-fill-15: #18181b;
+  --structure-colors-fill-secondary: #18181b;
+  --structure-colors-fill-terciary: #18181b;
+  --structure-colors-fill-quaternary: #18181b;
+  --structure-colors-border-color: var(--palette-gray-gray-5);
+  --structure-colors-border-color-secondary: var(--palette-gray-gray-3);
+  --text-primary: #0b1215;
+  --text-secondary: var(--palette-gray-gray-7);
+  --text-disabled: #0b1215;
+  --text-hover: var(--brand-base);
+  --text-placeholder: #9f9fa8;
+  --text-on-primary: #f1f1f1;
+  --semantic-colors-success: #109e7c;
+  --semantic-colors-danger: #e51937;
+  --semantic-colors-warning: #ff9900;
+  --semantic-colors-info: #4aafe4;
+  --brand-base: var(--colors-light-primary-light);
+  --brand-hover: var(--colors-light-primary-light-500);
+  --brand-active: var(--colors-light-primary-light-200);
+  --brand-base-50: var(--colors-light-primary-light-opacity-50);
+  --brand-base-25: var(--colors-light-primary-light-opacity-25);
+  --brand-base-15: var(--colors-light-primary-light-opacity-15);
+  --brand-secondary: var(--colors-light-secondary-light);
+  --brand-secondary-50: var(--colors-light-secondary-light-opacity-50);
+  --brand-secondary-25: var(--colors-light-secondary-light-opacity-25);
+  --brand-secondary-15: var(--colors-light-secondary-light-opacity-15);
+  /* Espaçamento e Bordas (Large) */
+  --spacing-spacing-xs: 0.25rem;
+  --spacing-spacing-sm: 0.5rem;
+  --spacing-spacing-md: 1rem;
+  --spacing-spacing-lg: 1.5rem;
+  --spacing-spacing-xl: 2rem;
+  --spacing-spacing-xxl: 3rem;
+  --spacing-spacing-xxxl: 3.5rem;
+  --spacing-spacing-xxs: 0.125rem;
+  --spacing-spacing-rg: 0.75rem;
+  --radius-no: 0rem;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-xxl: 2rem;
+  --radius-round: 64rem;
+  /* Tipografia */
+  --type-scale-1: 4rem;
+  --type-scale-2: 2.5rem;
+  --type-scale-3: 2rem;
+  --type-scale-4: 1.5rem;
+  --type-scale-5: 1.25rem;
+  --type-scale-6: 1rem;
+  --type-scale-7: 0.875rem;
+  --type-scale-8: 0.75rem;
+  --type-scale-9: 0.6875rem;
+  --type-scale-10: 0.625rem;
+  /* Brand Typography */
+  --font-family-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+  --font-family-serif: 'Merriweather', 'Georgia', serif;
+  --font-family-mono: 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  /* Branding */
+  --colors-light-primary-light: #0064cb;
+  --colors-light-primary-light-100: #00b8ff;
+  --colors-light-primary-light-200: #008fff;
+  --colors-light-primary-light-400: #0071c8;
+  --colors-light-primary-light-500: #00398d;
+  --colors-light-primary-light-opacity-50: #0064cb;
+  --colors-light-primary-light-opacity-25: #0064cb;
+  --colors-light-primary-light-opacity-15: #0064cb;
+  --colors-light-secondary-light: #00e5ce;
+  --colors-light-secondary-light-100: #b5eee3;
+  --colors-light-secondary-light-200: #7dead8;
+  --colors-light-secondary-light-400: #49bcab;
+  --colors-light-secondary-light-500: #01af9d;
+  --colors-light-secondary-light-opacity-50: #00e5ce;
+  --colors-light-secondary-light-opacity-25: #00e5ce;
+  --colors-light-secondary-light-opacity-15: #00e5ce;
+  --colors-light-neutral: #ffffff;
+  --color: #ffffff;
+  /* Branding Figma Export - COI */
+  --branding-coi-colors-light-primary-light-opacity-50: #0064cb80;
+  --branding-coi-colors-light-primary-light-opacity-25: #0064cb40;
+  --branding-coi-colors-light-primary-light: #0064cb;
+  --branding-coi-colors-light-primary-light-opacity-15: #0064cb26;
+  --branding-coi-colors-light-primary-light-100: #00b8ff;
+  --branding-coi-colors-light-primary-light-200: #008fff;
+  --branding-coi-colors-light-primary-light-400: #0071c8;
+  --branding-coi-colors-light-primary-light-500: #00398d;
+  --branding-coi-colors-light-secondary-light: #00e5ce;
+  --branding-coi-colors-light-secondary-light-opacity-50: #00e5ce80;
+  --branding-coi-colors-light-secondary-light-opacity-25: #00e5ce40;
+  --branding-coi-colors-light-secondary-light-opacity-15: #00e5ce26;
+  --branding-coi-colors-light-secondary-light-100: #b5eee3;
+  --branding-coi-colors-light-secondary-light-200: #7dead8;
+  --branding-coi-colors-light-secondary-light-400: #49bcab;
+  --branding-coi-colors-light-secondary-light-500: #01af9d;
+  --branding-coi-colors-light-neutral: #ffffff;
+  /* Branding Figma Export - COI Type */
+  --branding-coi-type-family-sans: Lato;
+  --branding-coi-type-family-serif: String value;
+  --branding-coi-type-family-mono: Roboto Mono;
+  --branding-coi-color: #ffffff;
+  /* Structure Figma Export - Large */
+  --structure-large-spacing-xxs: 2px;
+  --structure-large-spacing-xs: 4px;
+  --structure-large-spacing-sm: 8px;
+  --structure-large-spacing-rg: 12px;
+  --structure-large-spacing-md: 16px;
+  --structure-large-spacing-lg: 24px;
+  --structure-large-spacing-xl: 32px;
+  --structure-large-spacing-xxl: 48px;
+  --structure-large-spacing-xxxl: 56px;
+  --structure-large-radius-xxs: 2px;
+  --structure-large-radius-xs: 4px;
+  --structure-large-radius-sm: 8px;
+  --structure-large-radius-md: 12px;
+  --structure-large-radius-lg: 16px;
+  --structure-large-radius-xl: 24px;
+  --structure-large-radius-xxl: 32px;
+  --structure-large-radius-round: 1024px;
+  /* Structure Figma Export - Slim */
+  --structure-slim-spacing-xxs: 3px;
+  --structure-slim-spacing-xs: 6px;
+  --structure-slim-spacing-sm: 7px;
+  --structure-slim-spacing-rg: 9px;
+  --structure-slim-spacing-md: 10px;
+  --structure-slim-spacing-lg: 14px;
+  --structure-slim-spacing-xl: 20px;
+  --structure-slim-spacing-xxl: 40px;
+  --structure-slim-spacing-xxxl: 64px;
+  --structure-slim-radius-xxs: 2px;
+  --structure-slim-radius-xs: 4px;
+  --structure-slim-radius-sm: 8px;
+  --structure-slim-radius-md: 12px;
+  --structure-slim-radius-lg: 16px;
+  --structure-slim-radius-xl: 24px;
+  --structure-slim-radius-xxl: 32px;
+  --structure-slim-radius-round: 1024px;
+  /* Typography Base Figma Export */
+  --typography-base-family-sans: "Lato", sans-serif;
+  --typography-base-body-sm-regular-size: 14px;
+  --typography-base-body-sm-regular-weight: 400;
+  --typography-base-body-sm-regular-line-height: 16px;
+  --typography-base-body-sm-bold-weight: 600;
+  --typography-base-legal-bold-size: 10px;
+  --typography-base-legal-bold-weight: 600;
+  --typography-base-legal-bold-line-height: 16px;
+  --typography-base-type-scale-1: 64px;
+  --typography-base-type-scale-2: 40px;
+  --typography-base-type-scale-3: 32px;
+  --typography-base-type-scale-4: 24px;
+  --typography-base-type-scale-5: 20px;
+  --typography-base-type-scale-6: 16px;
+  --typography-base-type-scale-7: 14px;
+  --typography-base-type-scale-8: 12px;
+  --typography-base-type-scale-9: 11px;
+  --typography-base-type-scale-10: 10px;
+  /* System Figma Export - mode_1 */
+  --system-mode-1-loading: 1;
+  --system-mode-1-progressbar-width: var(--structure-large-spacing-sm);
+  --system-mode-1-string: Padrão;
+  /* Colors Figma Export - default structure colors */
+  --colors-structure-fill-secondary: #18181b0f;
+  --colors-structure-fill-terciary: #18181b0a;
+  --colors-structure-fill-quaternary: #18181b05;
+  --colors-structure-border-color: var(--palette-gray-gray-5);
+  --colors-structure-border-color-secondary: var(--palette-gray-gray-3);
+  --colors-structure-bg-base: #ffffff;
+  --colors-structure-bg-base-disabled: #ffffff40;
+  --colors-structure-bg-container: var(--palette-gray-gray-1);
+  --colors-structure-bg-elevated: var(--palette-gray-gray-3);
+  --colors-structure-bg-layout: var(--palette-gray-gray-0);
+  --colors-structure-bg-spot: #000000d9;
+  --colors-structure-bg-mask: #00000073;
+  --colors-structure-fill-15: #18181b26;
+  --colors-structure-fill-50: #18181b80;
+  /* Colors Figma Export - default semantic colors */
+  --colors-semantic-success: #109e7c;
+  --colors-semantic-danger: #e51937;
+  --colors-semantic-warning: #ff9900;
+  --colors-semantic-info: #4aafe4;
+
+  /* Semantic Colors - Updated from Figma */
+  --semantic-colors-success: #109e7c;
+  --semantic-colors-danger: #e51937;
+  --semantic-colors-success-light: #b2f2bb;
+  --semantic-colors-danger-light: #ffc9c9;
+
+  /* Badge Status Colors */
+  --badge-status-success-color: var(--semantic-colors-success);
+  --badge-status-success-bg: var(--semantic-colors-success-light);
+  --badge-status-error-color: var(--semantic-colors-danger);
+  --badge-status-error-bg: var(--semantic-colors-danger-light);
+
+  /* Global Design Tokens from Figma Data */
+  /* Text Colors */
+  --voa-text-primary: #0b1215;
+  /* Figma: text-primary */
+  --voa-text-secondary: #495057;
+  /* Figma: text-secondary */
+
+  /* Font Families */
+  --voa-font-family-sans: 'Lato', sans-serif;
+  /* Figma: Family Sans: Lato */
+
+  /* Base Backgrounds */
+  --voa-bg-base: #ffffff;
+  /* Figma: structure colors/bg-base */
+  --voa-bg-container: #f1f3f5;
+  /* Figma: structure colors/bg-container */
+
+  /* Border Colors */
+  --voa-border-color: #adb5bd;
+  /* Figma: structure colors/border-color */
+
+  /* Spacing Tokens from Figma (converted to px, assuming base unit is px) */
+  --voa-spacing-xs: 4px;
+  /* Figma: spacing/spacing-xs: 4 */
+  --voa-spacing-sm: 8px;
+  /* Figma: spacing/spacing-sm: 8 */
+  --voa-spacing-md: 16px;
+  /* Figma: spacing/spacing-md: 16 */
+  --voa-spacing-lg: 24px;
+  /* Figma: spacing/spacing-lg: 24 */
+  --voa-spacing-xl: 32px;
+  /* Figma: spacing/spacing-xl: 32 */
+
+  /* Border Radius Tokens from Figma (converted to px) */
+  --voa-radius-sm: 4px;
+  /* Figma: border-radius/radius-sm: 4 */
+  --voa-radius-md: 8px;
+  /* Figma: border-radius/radius-md: 8 (also radius-sm: 8 in another context, using one) */
+  --voa-radius-lg: 16px;
+  /* Figma: radius-lg: 16 */
+
+  /* Palette Colors from Figma */
+  --voa-palette-gray-6: #868e96;
+  --voa-palette-red-2: #ffc9c9;
+  --voa-palette-red-4: #ff8787;
+  --voa-palette-red-5: #ff6b6b;
+  --voa-palette-red-6: #fa5252;
+  --voa-palette-red-9: #c92a2a;
+  --voa-palette-yellow-1: #fff3bf;
+  --voa-palette-yellow-2: #ffec99;
+  --voa-palette-yellow-4: #ffd43b;
+  --voa-palette-yellow-9: #e67700;
+  --voa-palette-blue-2: #a5d8ff;
+  --voa-palette-blue-3: #74c0fc;
+  --voa-palette-blue-4: #4dabf7;
+  --voa-palette-blue-9: #1864ab;
+  --voa-palette-green-2: #b2f2bb;
+  --voa-palette-green-3: #8ce99a;
+  --voa-palette-green-4: #69db7c;
+  --voa-palette-teal-5: #20c997;
+
+  /* Semantic Colors from Figma */
+  --voa-semantic-color-success: #109e7c;
+  /* Figma: semantic colors/success (original #109e7c, related to teal-5 #20c997, green-3 #8ce99a, green-4 #69db7c) */
+  /* Note: Figma data also shows 'structure colors/fill-secondary: #18181b0f' which might be useful */
+
+  /* Alert Specific Tokens (derived from palette and semantic colors) */
+  --voa-alert-color-success-bg: var(--voa-palette-green-2, #b2f2bb);
+  --voa-alert-color-success-text: var(--voa-semantic-color-success, #109e7c);
+  --voa-alert-color-success-border: var(--voa-semantic-color-success, #109e7c);
+
+  --voa-alert-color-warning-bg: var(--voa-palette-yellow-1, #fff3bf);
+  --voa-alert-color-warning-text: var(--voa-palette-yellow-9, #e67700);
+  --voa-alert-color-warning-border: var(--voa-palette-yellow-4, #ffd43b);
+
+  --voa-alert-color-error-bg: var(--voa-palette-red-2, #ffc9c9);
+  --voa-alert-color-error-text: var(--voa-palette-red-9, #c92a2a);
+  --voa-alert-color-error-border: var(--voa-palette-red-5, #ff6b6b);
+
+  --voa-alert-color-info-bg: var(--voa-palette-blue-2, #a5d8ff);
+  --voa-alert-color-info-text: var(--voa-palette-blue-9, #1864ab);
+  --voa-alert-color-info-border: var(--voa-palette-blue-4, #4dabf7);
+
+  /* Alert Component Variables */
+  --voa-alert-padding: var(--voa-spacing-md, 16px);
+  --voa-alert-border-radius: var(--voa-radius-sm, 4px);
+  --voa-alert-border-width: 1px;
+  --voa-alert-font-size: 1rem;
+  /* Corresponds to 16px, common base size */
+  --voa-alert-line-height: 1.5;
+
+  /* Shadow Tokens from Figma Export */
+  --voa-shadow-fab: 0px 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px 0px rgba(0, 0, 0, 0.10), 1px 1px 1px 0px 0px rgba(0, 0, 0, 0.09), 2px 2px 2px 0px 0px rgba(0, 0, 0, 0.05), 4px 3px 2px 0px 0px rgba(0, 0, 0, 0.01), 6px 5px 2px 0px 0px rgba(0, 0, 0, 0.00);
+  --voa-shadow-inside-element: 0px 1px 0.5px 0.05px 0.05px rgba(24, 24, 24, 0.05);
+  --voa-shadow-surface: 0px 8px 16px 0px 0px rgba(255, 255, 255, 0.02), 0px 4px 4px 0px 0px rgba(0, 0, 0, 0.25), 0px 2.5px 0px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 4px 4px 0px 0px rgba(0, 0, 0, 0.25);
+  --voa-shadow-today: 0px 0px 16px 2px 2px rgba(28, 126, 214, 0.15) inset;
+  --voa-shadow-avatar: 0px 4px 4px 0px 0px rgba(0, 0, 0, 0.25);
+  --voa-shadow-input: 0px 3px 6px 0px 0px rgba(0, 0, 0, 0.10);
+  --voa-shadow-option: 0px 8px 16px 0px 0px rgba(255, 255, 255, 0.02), 0px 4px 4px 0px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px 0px rgba(0, 0, 0, 0.25);
+  --voa-shadow-switch: 0px 2px 4px 0px 0px rgba(24, 24, 24, 0.25) inset;
+  --voa-shadow-input-active: 0px 0px 8px 2px 2px rgba(0, 100, 203, 0.50) inset, 0px 4px 4px 0px 0px rgba(0, 0, 0, 0.25);
+
+  /* Radio Component - Missing Variables from Figma */
+  --colors-structure-fill-25: #18181b40;
+  --colors-light-primary-light-opacity-25: #0064cb40;
+  --colors-light-primary-light-opacity-15: #0064cb26;
+  --text-disabled-with-opacity: #0b121540;
+
+  /* Input/Button Focus State Effects from Figma */
+  --input-active-inner-shadow: inset 0px 0px 8px 2px rgba(0, 100, 203, 0.5);
+  --input-active-drop-shadow: 0px 4px 4px rgba(24, 24, 27, 0.15);
+  --input-focus-border-color: var(--brand-base, #0064cb);
+
+  /* Border Width Tokens - Added to replace hardcoded values */
+  --border-width-thin: 1px;
+  --border-width-medium: 1.125px;
+  --border-width-thick: 1.5px;
+
+  /* Component Opacity Tokens - For disabled/inactive states */
+  --opacity-disabled: 0.6;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-40: 0.4;
+
+  /* Focus State Shadows - Component-specific */
+  --shadow-focus-primary: inset 0px 0px 8px 2px rgba(0, 100, 203, 0.5);
+  --shadow-focus-secondary: inset 0px 0px 8px 2px rgba(0, 229, 206, 0.5);
+  --shadow-outline-secondary: 0 0 0 4px rgba(0, 229, 206, 0.5);
+  --shadow-outline-primary: 0 0 0 4px rgba(0, 100, 203, 0.1);
+
+  /* Avatar Font Sizes - By size prop */
+  --avatar-font-size-xs: 8px;
+  --avatar-font-size-sm: 12px;
+  --avatar-font-size-md: 16px;
+  --avatar-font-size-lg: 24px;
+  --avatar-font-size-xl: 28px;
+
+  /* Component Dimension Tokens */
+  --radio-indicator-size: 20px;
+  --switch-track-width: 40px;
+  --switch-track-height: 20px;
+  --switch-thumb-size: 16px;
+  --input-addon-height: 46px;
+  --checkbox-indicator-size: 20px;
+  --option-indicator-dot-size: 8px;
+
+  /* Additional Shadow Tokens - From external CSS */
+  --shadow-switch-inset: inset 0px 2px 4px 0px rgba(24, 24, 24, 0.25);
+  --shadow-radio-checked-inset: inset 0 2px 0 0 rgba(255, 255, 255, 0.25);
+
+  /* Line Height Tokens - Common values */
+  --line-height-body-sm: 16px;
+  --line-height-body-md: 24px;
+  --line-height-body-lg: 32px;
+}
+
+[data-theme="dark"] {
+  /* Cores Dark */
+  --palette-gray-gray-9: #212529;
+  --palette-gray-gray-8: #343a40;
+  --palette-gray-gray-7: #495057;
+  --palette-gray-gray-6: #868e96;
+  --palette-gray-gray-5: #adb5bd;
+  --palette-gray-gray-4: #ffffff;
+  --palette-gray-gray-3: #dee2e6;
+  --palette-gray-gray-2: #e9ecef;
+  --palette-gray-gray-1: #f1f3f5;
+  --palette-gray-gray-0: #f8f9fa;
+  --palette-blue-blue-9: #1864ab;
+  --palette-blue-blue-8: #1971c2;
+  --palette-blue-blue-7: #1c7ed6;
+  --palette-blue-blue-6: #228be6;
+  --palette-blue-blue-5: #339af0;
+  --palette-blue-blue-4: #4dabf7;
+  --palette-blue-blue-3: #74c0fc;
+  --palette-blue-blue-2: #a5d8ff;
+  --palette-blue-blue-1: #d0ebff;
+  --palette-blue-blue-0: #e7f5ff;
+  --palette-red-red-9: #c92a2a;
+  --palette-red-red-8: #e03131;
+  --palette-red-red-7: #f03e3e;
+  --palette-red-red-6: #fa5252;
+  --palette-red-red-5: #ff6b6b;
+  --palette-red-red-4: #ff8787;
+  --palette-red-red-3: #ffa8a8;
+  --palette-red-red-2: #ffc9c9;
+  --palette-red-red-1: #ffe3e3;
+  --palette-red-red-0: #fff5f5;
+  --palette-pink-pink-9: #a61e4d;
+  --palette-pink-pink-8: #c2255c;
+  --palette-pink-pink-7: #d6336c;
+  --palette-pink-pink-6: #e64980;
+  --palette-pink-pink-5: #f06595;
+  --palette-pink-pink-4: #f783ac;
+  --palette-pink-pink-3: #faa2c1;
+  --palette-pink-pink-2: #fcc2d7;
+  --palette-pink-pink-1: #ffdeeb;
+  --palette-pink-pink-0: #fff0f6;
+  --palette-grape-grape-9: #862e9c;
+  --palette-grape-grape-8: #9c36b5;
+  --palette-grape-grape-7: #ae3ec9;
+  --palette-grape-grape-6: #be4bdb;
+  --palette-grape-grape-5: #cc5de8;
+  --palette-grape-grape-4: #da77f2;
+  --palette-grape-grape-3: #e599f7;
+  --palette-grape-grape-2: #eebefa;
+  --palette-grape-grape-1: #f3d9fa;
+  --palette-grape-grape-0: #f8f0fc;
+  --palette-violet-violet-9: #5f3dc4;
+  --palette-violet-violet-8: #6741d9;
+  --palette-violet-violet-7: #7048e8;
+  --palette-violet-violet-6: #7950f2;
+  --palette-violet-violet-5: #845ef7;
+  --palette-violet-violet-4: #9775fa;
+  --palette-violet-violet-3: #b197fc;
+  --palette-violet-violet-2: #d0bfff;
+  --palette-violet-violet-1: #e5dbff;
+  --palette-violet-violet-0: #f3f0ff;
+  --palette-indigo-indigo-9: #364fc7;
+  --palette-indigo-indigo-8: #3b5bdb;
+  --palette-indigo-indigo-7: #4263eb;
+  --palette-indigo-indigo-6: #4c6ef5;
+  --palette-indigo-indigo-5: #5c7cfa;
+  --palette-indigo-indigo-4: #748ffc;
+  --palette-indigo-indigo-3: #91a7ff;
+  --palette-indigo-indigo-2: #bac8ff;
+  --palette-indigo-indigo-1: #dbe4ff;
+  --palette-indigo-indigo-0: #edf2ff;
+  --palette-cyan-cyan-9: #0b7285;
+  --palette-cyan-cyan-8: #0c8599;
+  --palette-cyan-cyan-7: #1098ad;
+  --palette-cyan-cyan-6: #15aabf;
+  --palette-cyan-cyan-5: #22b8cf;
+  --palette-cyan-cyan-4: #3bc9db;
+  --palette-cyan-cyan-3: #66d9e8;
+  --palette-cyan-cyan-2: #99e9f2;
+  --palette-cyan-cyan-1: #c5f6fa;
+  --palette-cyan-cyan-0: #e3fafc;
+  --palette-teal-teal-9: #087f5b;
+  --palette-teal-teal-8: #099268;
+  --palette-teal-teal-7: #0ca678;
+  --palette-teal-teal-6: #12b886;
+  --palette-teal-teal-5: #20c997;
+  --palette-teal-teal-4: #38d9a9;
+  --palette-teal-teal-3: #63e6be;
+  --palette-teal-teal-2: #96f2d7;
+  --palette-teal-teal-1: #c3fae8;
+  --palette-teal-teal-0: #e6fcf5;
+  --palette-green-green-9: #2b8a3e;
+  --palette-green-green-8: #2f9e44;
+  --palette-green-green-7: #37b24d;
+  --palette-green-green-6: #40c057;
+  --palette-green-green-5: #51cf66;
+  --palette-green-green-4: #69db7c;
+  --palette-green-green-3: #8ce99a;
+  --palette-green-green-2: #b2f2bb;
+  --palette-green-green-1: #d3f9d8;
+  --palette-green-green-0: #ebfbee;
+  --palette-lime-lime-9: #5c940d;
+  --palette-lime-lime-8: #66a80f;
+  --palette-lime-lime-7: #74b816;
+  --palette-lime-lime-6: #82c91e;
+  --palette-lime-lime-5: #94d82d;
+  --palette-lime-lime-4: #a9e34b;
+  --palette-lime-lime-3: #c0eb75;
+  --palette-lime-lime-2: #d8f5a2;
+  --palette-lime-lime-1: #e9fac8;
+  --palette-lime-lime-0: #f4fce3;
+  --palette-yellow-yellow-9: #e67700;
+  --palette-yellow-yellow-8: #f08c00;
+  --palette-yellow-yellow-7: #f59f00;
+  --palette-yellow-yellow-6: #fab005;
+  --palette-yellow-yellow-5: #fcc419;
+  --palette-yellow-yellow-4: #ffd43b;
+  --palette-yellow-yellow-3: #ffe066;
+  --palette-yellow-yellow-2: #ffec99;
+  --palette-yellow-yellow-1: #fff3bf;
+  --palette-yellow-yellow-0: #fff9db;
+  --palette-orange-orange-9: #d9480f;
+  --palette-orange-orange-8: #e8590c;
+  --palette-orange-orange-7: #f76707;
+  --palette-orange-orange-6: #fd7e14;
+  --palette-orange-orange-5: #ff922b;
+  --palette-orange-orange-4: #ffa94d;
+  --palette-orange-orange-3: #ffc078;
+  --palette-orange-orange-2: #ffd8a8;
+  --palette-orange-orange-1: #ffe8cc;
+  --palette-orange-orange-0: #fff4e6;
+  --structure-colors-bg-base: #1b1e21;
+  --structure-colors-bg-container: var(--palette-gray-gray-9);
+  --structure-colors-bg-elevated: var(--palette-gray-gray-8);
+  --structure-colors-bg-layout: #09090b;
+  --structure-colors-bg-spot: #50505d;
+  --structure-colors-bg-mask: #00000073;
+  --structure-colors-fill-15: #f8f9fa26;
+  --structure-colors-fill-secondary: #ffffff;
+  --structure-colors-fill-terciary: #ffffff;
+  --structure-colors-fill-quaternary: #ffffff;
+  --structure-colors-border-color: #50505d;
+  --structure-colors-border-color-secondary: #ffffff;
+  --text-primary: #ffffff;
+  --text-secondary: var(--palette-gray-gray-4);
+  --text-disabled: #ffffff;
+  --text-hover: var(--brand-base);
+  --text-placeholder: var(--palette-gray-gray-7);
+  --text-on-primary: var(--palette-gray-gray-8);
+  --semantic-colors-success: #44a15e;
+  --semantic-colors-danger: #ee3f59;
+  --semantic-colors-warning: #ffd058;
+  --semantic-colors-info: #3f70cf;
+  --brand-base: var(--colors-dark-primary-dark);
+  --brand-hover: var(--colors-dark-primary-dark-500);
+  --brand-active: var(--colors-dark-primary-dark-100);
+  --brand-base-50: var(--colors-dark-primary-dark-opacity-50);
+  --brand-base-25: var(--colors-dark-primary-dark-opacity-25);
+  --brand-base-15: var(--colors-dark-primary-dark-opacity-15);
+  --brand-secondary: var(--colors-dark-secondary-dark);
+  --brand-secondary-50: var(--colors-dark-secondary-dark-opacity-50);
+  --brand-secondary-25: var(--colors-dark-secondary-dark-opacity-25);
+  --brand-secondary-15: var(--colors-dark-secondary-dark-opacity-15);
+  /* Espaçamento e Bordas (Large) */
+  --spacing-spacing-xs: 0.25rem;
+  --spacing-spacing-sm: 0.5rem;
+  --spacing-spacing-md: 1rem;
+  --spacing-spacing-lg: 1.5rem;
+  --spacing-spacing-xl: 2rem;
+  --spacing-spacing-xxl: 3rem;
+  --spacing-spacing-xxxl: 3.5rem;
+  --spacing-spacing-xxs: 0.125rem;
+  --spacing-spacing-rg: 0.75rem;
+  --radius-no: 0rem;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-xxl: 2rem;
+  --radius-round: 64rem;
+  /* Tipografia */
+  --type-scale-1: 4rem;
+  --type-scale-2: 2.5rem;
+  --type-scale-3: 2rem;
+  --type-scale-4: 1.5rem;
+  --type-scale-5: 1.25rem;
+  --type-scale-6: 1rem;
+  --type-scale-7: 0.875rem;
+  --type-scale-8: 0.75rem;
+  --type-scale-9: 0.6875rem;
+  --type-scale-10: 0.625rem;
+  /* Brand Typography */
+  --font-family-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+  --font-family-serif: 'Merriweather', 'Georgia', serif;
+  --font-family-mono: 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  /* Branding */
+  --colors-dark-primary-dark: #00e5ce;
+  --colors-dark-primary-dark-100: #b5eee3;
+  --colors-dark-primary-dark-200: #7dead8;
+  --colors-dark-primary-dark-400: #49bcab;
+  --colors-dark-primary-dark-500: #01af9d;
+  --colors-dark-primary-dark-opacity-50: #00e5ce80;
+  --colors-dark-primary-dark-opacity-25: #00e5ce40;
+  --colors-dark-primary-dark-opacity-15: #00e5ce26;
+  --colors-dark-secondary-dark: #0064cb;
+  --colors-dark-secondary-dark-100: #00b8ff;
+  --colors-dark-secondary-dark-200: #008fff;
+  --colors-dark-secondary-dark-400: #0071c8;
+  --colors-dark-secondary-dark-500: #00398d;
+  --colors-dark-secondary-dark-opacity-50: #0064cb80;
+  --colors-dark-secondary-dark-opacity-25: #0064cb40;
+  --colors-dark-secondary-dark-opacity-15: #0064cb26;
+  --colors-dark-neutral: #dfdfdf;
+  /* Branding Figma Export - COI */
+  --branding-coi-colors-dark-primary-dark: #00e5ce;
+  --branding-coi-colors-dark-primary-dark-opacity-50: #00e5ce80;
+  --branding-coi-colors-dark-primary-dark-opacity-25: #00e5ce40;
+  --branding-coi-colors-dark-primary-dark-opacity-15: #00e5ce26;
+  --branding-coi-colors-dark-primary-dark-100: #b5eee3;
+  --branding-coi-colors-dark-primary-dark-200: #7dead8;
+  --branding-coi-colors-dark-primary-dark-400: #49bcab;
+  --branding-coi-colors-dark-primary-dark-500: #01af9d;
+  --branding-coi-colors-dark-secondary-dark: #0064cb;
+  --branding-coi-colors-dark-secondary-dark-opacity-50: #0064cb80;
+  --branding-coi-colors-dark-secondary-dark-opacity-25: #0064cb40;
+  --branding-coi-colors-dark-secondary-dark-opacity-15: #0064cb26;
+  --branding-coi-colors-dark-secondary-dark-100: #00b8ff;
+  --branding-coi-colors-dark-secondary-dark-200: #008fff;
+  --branding-coi-colors-dark-secondary-dark-400: #0071c8;
+  --branding-coi-colors-dark-secondary-dark-500: #00398d;
+  --branding-coi-colors-dark-neutral: #dfdfdf;
+  /* Branding Figma Export - COI Type */
+  --branding-coi-type-family-sans: Lato;
+  --branding-coi-type-family-serif: String value;
+  --branding-coi-type-family-mono: Roboto Mono;
+  --branding-coi-color: #ffffff;
+  /* Structure Figma Export - Large */
+  --structure-large-spacing-xxs: 2px;
+  --structure-large-spacing-xs: 4px;
+  --structure-large-spacing-sm: 8px;
+  --structure-large-spacing-rg: 12px;
+  --structure-large-spacing-md: 16px;
+  --structure-large-spacing-lg: 24px;
+  --structure-large-spacing-xl: 32px;
+  --structure-large-spacing-xxl: 48px;
+  --structure-large-spacing-xxxl: 56px;
+  --structure-large-radius-xxs: 2px;
+  --structure-large-radius-xs: 4px;
+  --structure-large-radius-sm: 8px;
+  --structure-large-radius-md: 12px;
+  --structure-large-radius-lg: 16px;
+  --structure-large-radius-xl: 24px;
+  --structure-large-radius-xxl: 32px;
+  --structure-large-radius-round: 1024px;
+  /* Structure Figma Export - Slim */
+  --structure-slim-spacing-xxs: 3px;
+  --structure-slim-spacing-xs: 6px;
+  --structure-slim-spacing-sm: 7px;
+  --structure-slim-spacing-rg: 9px;
+  --structure-slim-spacing-md: 10px;
+  --structure-slim-spacing-lg: 14px;
+  --structure-slim-spacing-xl: 20px;
+  --structure-slim-spacing-xxl: 40px;
+  --structure-slim-spacing-xxxl: 64px;
+  --structure-slim-radius-xxs: 2px;
+  --structure-slim-radius-xs: 4px;
+  --structure-slim-radius-sm: 8px;
+  --structure-slim-radius-md: 12px;
+  --structure-slim-radius-lg: 16px;
+  --structure-slim-radius-xl: 24px;
+  --structure-slim-radius-xxl: 32px;
+  --structure-slim-radius-round: 1024px;
+  /* System Figma Export - mode_2 */
+  --system-mode-2-loading: 1;
+  --system-mode-2-progressbar-width: var(--structure-large-spacing-sm);
+  --system-mode-2-string: Dark;
+  /* Colors Figma Export - dark structure colors */
+  --colors-structure-fill-secondary: #ffffff;
+  --colors-structure-fill-terciary: #ffffff;
+  --colors-structure-fill-quaternary: #ffffff;
+  --colors-structure-border-color: #50505d;
+  --colors-structure-border-color-secondary: #ffffff;
+  --colors-structure-bg-base: #1b1e21;
+  --colors-structure-bg-base-disabled: #1b1e2140;
+  --colors-structure-bg-container: var(--palette-gray-gray-9);
+  --colors-structure-bg-elevated: var(--palette-gray-gray-8);
+  --colors-structure-bg-layout: #09090b;
+  --colors-structure-bg-spot: #50505d;
+  --colors-structure-bg-mask: #00000073;
+  --colors-structure-fill-15: #f8f9fa26;
+  --colors-structure-fill-50: #f8f9fa80;
+  /* Colors Figma Export - dark semantic colors */
+  --colors-semantic-success: #44a15e;
+  --colors-semantic-danger: #ee3f59;
+  --colors-semantic-warning: #ffd058;
+  --colors-semantic-info: #3f70cf;
+
+  /* Semantic Colors - Dark Theme */
+  --semantic-colors-success: #44a15e;
+  --semantic-colors-danger: #ee3f59;
+  --semantic-colors-success-light: #69db7c;
+  --semantic-colors-danger-light: #ff8787;
+
+  /* Badge Status Colors - Dark Theme */
+  --badge-status-success-color: var(--semantic-colors-success);
+  --badge-status-success-bg: var(--semantic-colors-success-light);
+  --badge-status-error-color: var(--semantic-colors-danger);
+  --badge-status-error-bg: var(--semantic-colors-danger-light);
+
+  /* Input/Button Focus State Effects from Figma - Dark Theme */
+  --input-active-inner-shadow: inset 0px 0px 8px 2px rgba(0, 229, 206, 0.5);
+  --input-active-drop-shadow: 0px 4px 4px rgba(24, 24, 27, 0.15);
+  --input-focus-border-color: var(--brand-base, #00e5ce);
+
+  /* Border Width Tokens - Added to replace hardcoded values */
+  --border-width-thin: 1px;
+  --border-width-medium: 1.125px;
+  --border-width-thick: 1.5px;
+
+  /* Component Opacity Tokens - For disabled/inactive states */
+  --opacity-disabled: 0.6;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-40: 0.4;
+
+  /* Focus State Shadows - Component-specific */
+  --shadow-focus-primary: inset 0px 0px 8px 2px rgba(0, 100, 203, 0.5);
+  --shadow-focus-secondary: inset 0px 0px 8px 2px rgba(0, 229, 206, 0.5);
+  --shadow-outline-secondary: 0 0 0 4px rgba(0, 229, 206, 0.5);
+  --shadow-outline-primary: 0 0 0 4px rgba(0, 100, 203, 0.1);
+
+  /* Avatar Font Sizes - By size prop */
+  --avatar-font-size-xs: 8px;
+  --avatar-font-size-sm: 12px;
+  --avatar-font-size-md: 16px;
+  --avatar-font-size-lg: 24px;
+  --avatar-font-size-xl: 28px;
+
+  /* Component Dimension Tokens */
+  --radio-indicator-size: 20px;
+  --switch-track-width: 40px;
+  --switch-track-height: 20px;
+  --switch-thumb-size: 16px;
+  --input-addon-height: 46px;
+  --checkbox-indicator-size: 20px;
+
+  /* Additional Shadow Tokens - From external CSS */
+  --shadow-switch-inset: inset 0px 2px 4px 0px rgba(24, 24, 24, 0.25);
+  --shadow-radio-checked-inset: inset 0 2px 0 0 rgba(255, 255, 255, 0.25);
+
+  /* Line Height Tokens - Common values */
+  --line-height-body-sm: 16px;
+  --line-height-body-md: 24px;
+  --line-height-body-lg: 32px;
+  --option-indicator-dot-size: 8px;
+}
+
+/* TODO: Font face definitions for 'Lato' if not globally available */
+/* @font-face {
+  font-family: 'Lato';
+  src: url('/path/to/lato.woff2') format('woff2'),
+       url('/path/to/lato.woff') format('woff');
+  font-weight: 400; // Regular
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Lato';
+  src: url('/path/to/lato-semibold.woff2') format('woff2'),
+       url('/path/to/lato-semibold.woff') format('woff');
+  font-weight: 600; // SemiBold
+  font-style: normal;
+} */