/* ============================================================ TOKENS.CSS — Variáveis de design (Design Tokens) Central de Ouvintes Maisnova Todas as variáveis CSS do sistema de design ============================================================ */ /* ------------------------------------------------------- PALETA DE CORES BASE (constantes, não mudam com tema) ------------------------------------------------------- */ :root { /* Cores da marca */ --color-primary: #0060AD; --color-primary-light: #338CD1; --color-primary-dark: #004A85; --color-primary-50: rgba(0, 96, 173, 0.08); --color-primary-100: rgba(0, 96, 173, 0.15); --color-primary-200: rgba(0, 96, 173, 0.25); --color-primary-300: rgba(0, 96, 173, 0.40); --color-secondary: #0EA5E9; --color-secondary-light:#38BDF8; --color-secondary-dark: #0284C7; --color-secondary-50: rgba(14, 165, 233, 0.08); --color-secondary-100: rgba(14, 165, 233, 0.15); --color-secondary-200: rgba(14, 165, 233, 0.25); --color-secondary-300: rgba(14, 165, 233, 0.40); /* Cores semânticas */ --color-success: #22C55E; --color-success-light: #4ADE80; --color-success-dark: #16A34A; --color-success-50: rgba(34, 197, 94, 0.10); --color-success-100: rgba(34, 197, 94, 0.20); --color-warning: #F59E0B; --color-warning-light: #FBBF24; --color-warning-dark: #D97706; --color-warning-50: rgba(245, 158, 11, 0.10); --color-warning-100: rgba(245, 158, 11, 0.20); --color-error: #EF4444; --color-error-light: #F87171; --color-error-dark: #DC2626; --color-error-50: rgba(239, 68, 68, 0.10); --color-error-100: rgba(239, 68, 68, 0.20); --color-info: #3B82F6; --color-info-light: #60A5FA; --color-info-dark: #2563EB; --color-info-50: rgba(59, 130, 246, 0.10); /* Gradientes da marca */ --gradient-primary: linear-gradient(135deg, #0060AD 0%, #338CD1 100%); --gradient-primary-hover: linear-gradient(135deg, #004A85 0%, #0060AD 100%); --gradient-secondary: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%); --gradient-accent: linear-gradient(135deg, #0060AD 0%, #0EA5E9 100%); --gradient-dark: linear-gradient(135deg, #1A1D23 0%, #252830 100%); /* ------------------------------------------------------- TIPOGRAFIA ------------------------------------------------------- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Tamanhos de fonte */ --font-size-xs: 0.6875rem; /* 11px */ --font-size-sm: 0.75rem; /* 12px */ --font-size-base: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ /* Altura de linha */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Espaçamento entre letras */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; /* ------------------------------------------------------- ESPAÇAMENTO (base 4px) ------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --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-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ------------------------------------------------------- BORDER RADIUS ------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ------------------------------------------------------- TRANSIÇÕES ------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: ease; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ------------------------------------------------------- Z-INDEX ------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 250; --z-overlay: 300; --z-modal: 300; --z-popover: 350; --z-toast: 400; --z-tooltip: 500; --z-max: 9999; /* ------------------------------------------------------- TAMANHOS FIXOS ------------------------------------------------------- */ --navbar-height: 64px; --sidebar-width: 280px; --sidebar-collapsed-width: 64px; --chat-sidebar-width: 360px; --input-height: 44px; --input-height-sm: 36px; --input-height-lg: 52px; /* ------------------------------------------------------- PALETA DE CORES PARA RÁDIOS (badges) ------------------------------------------------------- */ --radio-color-1: #0060AD; --radio-color-2: #6366F1; --radio-color-3: #22C55E; --radio-color-4: #A855F7; --radio-color-5: #EC4899; --radio-color-6: #F59E0B; --radio-color-7: #06B6D4; --radio-color-8: #84CC16; --radio-color-9: #F43F5E; --radio-color-10: #8B5CF6; --radio-color-11: #14B8A6; --radio-color-12: #475569; } /* ------------------------------------------------------- TEMA ESCURO (padrão) ------------------------------------------------------- */ :root, [data-theme='dark'] { /* Superfícies */ --bg-primary: #0F1115; --bg-secondary: #1A1D23; --bg-tertiary: #252830; --bg-elevated: #2A2D35; --bg-hover: rgba(255, 255, 255, 0.05); --bg-active: rgba(255, 255, 255, 0.08); --bg-glass: rgba(26, 29, 35, 0.80); --bg-glass-heavy: rgba(15, 17, 21, 0.90); /* Bordas */ --border-primary: rgba(255, 255, 255, 0.08); --border-secondary: rgba(255, 255, 255, 0.05); --border-hover: rgba(255, 255, 255, 0.15); --border-focus: var(--color-secondary); /* Texto */ --text-primary: #F0F0F0; --text-secondary: #8B8D93; --text-tertiary: #5A5C63; --text-disabled: #3E4048; --text-inverse: #1A1D23; --text-link: var(--color-secondary-light); /* Sombras */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-large: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(0, 96, 173, 0.20), 0 0 40px rgba(0, 96, 173, 0.08); --shadow-glow-blue: 0 0 20px rgba(0, 96, 173, 0.20), 0 0 40px rgba(0, 96, 173, 0.08); --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Scrollbar */ --scrollbar-track: #1A1D23; --scrollbar-thumb: #3E4048; --scrollbar-thumb-hover: #5A5C63; /* Input */ --input-bg: #1A1D23; --input-bg-focus: #252830; --input-border: rgba(255, 255, 255, 0.10); --input-placeholder: #5A5C63; /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.60); --overlay-blur: blur(8px); /* Superfícies (aliases para compatibilidade de componentes) */ --surface-1: #1A1D23; --surface-2: #252830; --surface-3: #2A2D35; --surface-4: #32363F; /* Bordas (aliases) */ --border-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); /* Texto extra */ --text-quaternary: #3E4048; } /* ------------------------------------------------------- TEMA CLARO ------------------------------------------------------- */ [data-theme='light'] { /* Superfícies */ --bg-primary: #F5F6FA; --bg-secondary: #FFFFFF; --bg-tertiary: #E8EAF0; --bg-elevated: #FFFFFF; --bg-hover: rgba(0, 0, 0, 0.03); --bg-active: rgba(0, 0, 0, 0.06); --bg-glass: rgba(255, 255, 255, 0.80); --bg-glass-heavy: rgba(245, 246, 250, 0.92); /* Bordas */ --border-primary: rgba(0, 0, 0, 0.10); --border-secondary: rgba(0, 0, 0, 0.06); --border-hover: rgba(0, 0, 0, 0.18); --border-focus: var(--color-secondary); /* Texto */ --text-primary: #1A1D23; --text-secondary: #6B7280; --text-tertiary: #9CA3AF; --text-disabled: #D1D5DB; --text-inverse: #F0F0F0; --text-link: var(--color-secondary); /* Sombras */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-large: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06); --shadow-glow: 0 0 20px rgba(0, 96, 173, 0.12), 0 0 40px rgba(0, 96, 173, 0.05); --shadow-glow-blue: 0 0 20px rgba(0, 96, 173, 0.12), 0 0 40px rgba(0, 96, 173, 0.05); --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.08); /* Scrollbar */ --scrollbar-track: #E8EAF0; --scrollbar-thumb: #C4C7CE; --scrollbar-thumb-hover: #9CA3AF; /* Input */ --input-bg: #FFFFFF; --input-bg-focus: #FFFFFF; --input-border: rgba(0, 0, 0, 0.12); --input-placeholder: #9CA3AF; /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.40); --overlay-blur: blur(8px); /* Superfícies (aliases para compatibilidade de componentes) */ --surface-1: #FFFFFF; --surface-2: #F0F2F7; --surface-3: #E8EAF0; --surface-4: #DDE0E8; /* Bordas (aliases) */ --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.18); /* Texto extra */ --text-quaternary: #D1D5DB; }