/** * _variables.css * Design Tokens do Mimuss * * IMPORTANTE: Este é o arquivo CENTRAL de tokens. * Todos os valores visuais DEVEM usar estas variáveis. * * Documentação completa: /DESIGN_SYSTEM.md */ :root { /* ═══════════════════════════════════════════════════════════════════════ CORES PRIMÁRIAS ═══════════════════════════════════════════════════════════════════════ */ --color-primary: #2de2ff; --color-primary-hover: #26c8e0; --color-primary-rgb: 45, 226, 255; /* ═══════════════════════════════════════════════════════════════════════ BACKGROUNDS ═══════════════════════════════════════════════════════════════════════ */ --color-bg-page: #000000; --color-bg-body: #121212; --color-bg-dark: #0a0a0a; --color-bg-card: #1a1a1a; --color-bg-card-hover: #2a2a2a; --color-bg-input: #1f1f1f; --color-bg-auth: #141414; --color-bg-elevated: #272727; --color-bg-olive: #3d4a3d; /* Aliases para compatibilidade */ --color-bg-black: var(--color-bg-page); --color-bg-card-light: var(--color-bg-card-hover); /* ═══════════════════════════════════════════════════════════════════════ TEXTOS ═══════════════════════════════════════════════════════════════════════ */ --color-text-primary: #ffffff; --color-text-secondary: #888888; --color-text-muted: #666666; --color-text-dark: rgb(21, 21, 21); /* Aliases para compatibilidade */ --color-text-white: var(--color-text-primary); --color-text-gray: var(--color-text-secondary); /* ═══════════════════════════════════════════════════════════════════════ BORDAS ═══════════════════════════════════════════════════════════════════════ */ --color-border: #333333; --color-border-light: #444444; --color-border-card: #2a2a2a; --color-border-input: var(--color-border); --color-border-mui: rgba(21, 21, 21, 0.12); /* ═══════════════════════════════════════════════════════════════════════ ESTADOS ═══════════════════════════════════════════════════════════════════════ */ --color-success: #2de2ff; --color-error: #ff4444; --color-warning: #ffaa00; --color-info: #4488ff; /* ═══════════════════════════════════════════════════════════════════════ MUI ACCENT COLORS ═══════════════════════════════════════════════════════════════════════ */ /* Legacy aliases - apontam para --color-primary (usar --color-primary em código novo) */ --mui-green: var(--color-primary); --mui-green-hover: var(--color-primary-hover); --mui-green-rgb: var(--color-primary-rgb); --mui-purple: rgb(151, 114, 255); --mui-magenta: rgb(252, 97, 255); --mui-blue: rgb(25, 118, 210); /* MUI Dark opacity variants */ --mui-dark: rgb(21, 21, 21); --mui-dark-02: rgba(21, 21, 21, 0.02); --mui-dark-04: rgba(21, 21, 21, 0.04); --mui-dark-08: rgba(21, 21, 21, 0.08); --mui-dark-12: rgba(21, 21, 21, 0.12); --mui-dark-26: rgba(0, 0, 0, 0.26); --mui-dark-87: rgba(0, 0, 0, 0.87); /* ═══════════════════════════════════════════════════════════════════════ GRADIENTES ═══════════════════════════════════════════════════════════════════════ */ --gradient-pink: linear-gradient(135deg, #e8d4d4 0%, #f0e0e0 100%); --gradient-blue: linear-gradient(135deg, #d4e4e8 0%, #e0f0f4 100%); --gradient-purple: linear-gradient(135deg, #e0d4e8 0%, #f0e0f8 100%); --gradient-green: linear-gradient(135deg, #d4e8d4 0%, #e0f0e0 100%); /* ═══════════════════════════════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════════════════════════════ */ --color-scrollbar-track: transparent; --color-scrollbar-thumb: rgba(21, 21, 21, 0.2); --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2); --color-scrollbar-thumb-visible: #151515; /* ═══════════════════════════════════════════════════════════════════════ SOMBRAS ═══════════════════════════════════════════════════════════════════════ */ --shadow-card: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --shadow-elevated: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-primary); --shadow-glow: 0 0 20px rgba(var(--color-primary-rgb), 0.3); /* ═══════════════════════════════════════════════════════════════════════ TIPOGRAFIA - FONT FAMILIES ═══════════════════════════════════════════════════════════════════════ */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Gravity-Normal', var(--font-primary); /* Aliases para compatibilidade */ --font-family: var(--font-primary); --font-inter: 'Inter', 'Inter Fallback'; --font-roboto: "Roboto", "Helvetica", "Arial", sans-serif; /* ═══════════════════════════════════════════════════════════════════════ TIPOGRAFIA - FONT SIZES ═══════════════════════════════════════════════════════════════════════ */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: clamp(1.25rem, 2vw, 1.5rem); --text-4xl: clamp(2rem, 4vw, 3rem); --text-5xl: clamp(2rem, 5vw, 3.5rem); /* ═══════════════════════════════════════════════════════════════════════ TIPOGRAFIA - FONT WEIGHTS ═══════════════════════════════════════════════════════════════════════ */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* ═══════════════════════════════════════════════════════════════════════ TIPOGRAFIA - LETTER SPACING ═══════════════════════════════════════════════════════════════════════ */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; /* ═══════════════════════════════════════════════════════════════════════ TIPOGRAFIA - LINE HEIGHTS ═══════════════════════════════════════════════════════════════════════ */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; /* ═══════════════════════════════════════════════════════════════════════ ESPAÇAMENTO (8px base scale) ═══════════════════════════════════════════════════════════════════════ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Aliases para compatibilidade */ --spacing-xs: var(--space-1); --spacing-sm: var(--space-2); --spacing-md: var(--space-4); --spacing-lg: var(--space-6); --spacing-xl: var(--space-8); --spacing-2xl: var(--space-12); --spacing-3xl: var(--space-16); --spacing-4xl: var(--space-24); /* ═══════════════════════════════════════════════════════════════════════ CONTAINERS ═══════════════════════════════════════════════════════════════════════ */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1400px; /* ═══════════════════════════════════════════════════════════════════════ BORDER RADIUS ═══════════════════════════════════════════════════════════════════════ */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ═══════════════════════════════════════════════════════════════════════ TRANSIÇÕES - DURAÇÕES ═══════════════════════════════════════════════════════════════════════ */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; /* ═══════════════════════════════════════════════════════════════════════ TRANSIÇÕES - TIMING FUNCTIONS ═══════════════════════════════════════════════════════════════════════ */ --ease-default: ease; --ease-in-out: ease-in-out; --ease-mui: cubic-bezier(0.4, 0, 0.2, 1); /* ═══════════════════════════════════════════════════════════════════════ TRANSIÇÕES - COMPOSTAS ═══════════════════════════════════════════════════════════════════════ */ --transition-fast: all var(--duration-fast) var(--ease-default); --transition-base: all var(--duration-base) var(--ease-default); --transition-slow: all var(--duration-slow) var(--ease-default); --transition-mui: all var(--duration-base) var(--ease-mui); /* ═══════════════════════════════════════════════════════════════════════ Z-INDEX SCALE ═══════════════════════════════════════════════════════════════════════ */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ═══════════════════════════════════════════════════════════════════════ BREAKPOINTS (para referência em JS, não use em CSS) ═══════════════════════════════════════════════════════════════════════ */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1400px; /* ═══════════════════════════════════════════════════════════════════════ COMPONENT-SPECIFIC TOKENS ═══════════════════════════════════════════════════════════════════════ */ /* Navbar */ --navbar-height: 4.5rem; --navbar-height-mobile: 4rem; --navbar-bg: rgba(0, 0, 0, 0.7); --navbar-blur: 20px; /* Buttons */ --btn-padding-y: 0.875rem; --btn-padding-x: 1.75rem; --btn-padding-y-sm: 0.5rem; --btn-padding-x-sm: 1rem; --btn-padding-y-lg: 1rem; --btn-padding-x-lg: 2rem; /* Inputs */ --input-padding-y: 0.875rem; --input-padding-x: 1rem; --input-height: 3rem; /* Cards */ --card-padding: var(--space-10); --card-padding-mobile: var(--space-6); --card-radius: var(--radius-xl); --card-radius-large: var(--radius-2xl); } /* ═══════════════════════════════════════════════════════════════════════════ DARK THEME (padrão do Mimuss) ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"], .dark-theme { --color-bg-primary: var(--color-bg-page); --color-bg-secondary: var(--color-bg-dark); } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME (para páginas logadas, se necessário) ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"], .light-theme { --color-bg-primary: rgb(255, 255, 255); --color-bg-secondary: rgb(250, 250, 250); --color-text-primary: var(--mui-dark); --color-text-secondary: var(--color-text-muted); }