/* public/css/variables.css */ :root { /* ==================================== */ /* 1. Cores (HSLA - Tema Escuro Padrão) */ /* ==================================== */ /* Paleta Principal (Neutros) */ /* Usando HSLA para maior flexibilidade na opacidade */ --clr-black-pure: 0, 0%, 0%; /* Preto puro */ --clr-white-pure: 0, 0%, 100%; /* Branco puro */ /* Tons de Cinza (Gray Scale) */ --clr-gray-050: 0, 0%, 95%; /* Quase branco */ --clr-gray-100: 0, 0%, 90%; --clr-gray-200: 0, 0%, 80%; --clr-gray-300: 0, 0%, 70%; --clr-gray-400: 0, 0%, 60%; --clr-gray-500: 0, 0%, 50%; /* Cinza médio */ --clr-gray-600: 0, 0%, 40%; --clr-gray-700: 0, 0%, 30%; --clr-gray-800: 0, 0%, 20%; --clr-gray-900: 0, 0%, 10%; /* Quase preto */ /* Fundo e Superfícies (Baseado em Cinzas Levemente Azulados/Violetas para tema escuro) */ --clr-bg-page: hsla(240, 5%, 8%, 1); /* Fundo da página */ --clr-bg-base: hsla(240, 5%, 12%, 1); /* Base para elementos (cards, sections) */ --clr-bg-light: hsla(240, 5%, 15%, 1); /* Elementos mais claros (navbar, headers) */ --clr-bg-medium: hsla(240, 5%, 20%, 1); /* Hover, seleção, inputs */ --clr-bg-dark: hsla(240, 5%, 5%, 1); /* Para sombras ou elementos muito escuros */ --clr-bg-overlay: hsla(240, 5%, 12%, 0.9); /* Para popups com blur ou sobreposições */ /* Texto (Baseado nos cinzas e branco) */ --clr-text-primary: hsla(var(--clr-white-pure), 0.95); /* Quase branco, títulos */ --clr-text-secondary: hsla(var(--clr-white-pure), 0.7); /* Padrão, parágrafos */ --clr-text-tertiary: hsla(var(--clr-white-pure), 0.5); /* Metainfo, texto auxiliar */ --clr-text-disabled: hsla(var(--clr-white-pure), 0.3); /* Texto desabilitado */ --clr-text-link: var(--clr-blue-m); /* Cor padrão para links */ --clr-text-inverted: hsla(var(--clr-black-pure), 0.9); /* Texto escuro sobre cor clara */ /* ==================================== */ /* 2. Cores de Destaque (L, M, D) */ /* L = Light, M = Medium (base), D = Dark */ /* ==================================== */ /* Vermelho (Red) - HUE: 0 */ --clr-red-hue: 0; --clr-red-l: hsla(var(--clr-red-hue), 80%, 70%, 1); --clr-red-m: hsla(var(--clr-red-hue), 70%, 55%, 1); /* Base (Ex: Erro) */ --clr-red-d: hsla(var(--clr-red-hue), 60%, 40%, 1); /* Laranja (Orange) - HUE: 30 */ --clr-orange-hue: 30; --clr-orange-l: hsla(var(--clr-orange-hue), 90%, 70%, 1); --clr-orange-m: hsla(var(--clr-orange-hue), 90%, 55%, 1); --clr-orange-d: hsla(var(--clr-orange-hue), 90%, 40%, 1); /* Amarelo (Yellow) - HUE: 45 */ --clr-yellow-hue: 45; --clr-yellow-l: hsla(var(--clr-yellow-hue), 90%, 80%, 1); --clr-yellow-m: hsla(var(--clr-yellow-hue), 90%, 65%, 1); /* Base (Ex: Aviso) */ --clr-yellow-d: hsla(var(--clr-yellow-hue), 90%, 50%, 1); /* Verde (Green) - HUE: 120 */ --clr-green-hue: 120; --clr-green-l: hsla(var(--clr-green-hue), 70%, 65%, 1); --clr-green-m: hsla(var(--clr-green-hue), 60%, 45%, 1); /* Base (Ex: Sucesso) */ --clr-green-d: hsla(var(--clr-green-hue), 50%, 30%, 1); /* Ciano (Cyan) - HUE: 180 */ --clr-cyan-hue: 180; --clr-cyan-l: hsla(var(--clr-cyan-hue), 80%, 70%, 1); --clr-cyan-m: hsla(var(--clr-cyan-hue), 80%, 50%, 1); --clr-cyan-d: hsla(var(--clr-cyan-hue), 80%, 35%, 1); /* Azul (Blue) - HUE: 220 */ --clr-blue-hue: 220; --clr-blue-l: hsla(var(--clr-blue-hue), 80%, 75%, 1); --clr-blue-m: hsla(var(--clr-blue-hue), 80%, 60%, 1); --clr-blue-d: hsla(var(--clr-blue-hue), 80%, 45%, 1); /* Índigo (Indigo) - HUE: 240 */ --clr-indigo-hue: 240; --clr-indigo-l: hsla(var(--clr-indigo-hue), 70%, 70%, 1); --clr-indigo-m: hsla(var(--clr-indigo-hue), 70%, 55%, 1); --clr-indigo-d: hsla(var(--clr-indigo-hue), 70%, 40%, 1); /* Violeta (Violet) / Roxo - HUE: 270 */ --clr-violet-hue: 270; --clr-violet-l: hsla(var(--clr-violet-hue), 70%, 75%, 1); --clr-violet-m: hsla(var(--clr-violet-hue), 70%, 60%, 1); --clr-violet-d: hsla(var(--clr-violet-hue), 70%, 45%, 1); /* Magenta (Magenta) / Fúcsia - HUE: 300 */ --clr-magenta-hue: 300; --clr-magenta-l: hsla(var(--clr-magenta-hue), 80%, 75%, 1); --clr-magenta-m: hsla(var(--clr-magenta-hue), 80%, 60%, 1); --clr-magenta-d: hsla(var(--clr-magenta-hue), 80%, 45%, 1); /* Rosa (Pink) - HUE: 330 */ --clr-pink-hue: 330; --clr-pink-l: hsla(var(--clr-pink-hue), 80%, 80%, 1); --clr-pink-m: hsla(var(--clr-pink-hue), 80%, 65%, 1); --clr-pink-d: hsla(var(--clr-pink-hue), 80%, 50%, 1); /* Alias para a cor de destaque principal (Ex: Purple/Magenta) */ --clr-accent-hue: var(--clr-violet-hue); /* Definindo seu accent como Violeta */ --clr-accent-l: var(--clr-violet-l); --clr-accent-m: var(--clr-violet-m); --clr-accent-d: var(--clr-violet-d); --clr-accent: var(--clr-accent-m); /* Alias para a cor base do accent */ /* ==================================== */ /* 3. Tipografia e Tamanhos de Fonte */ /* (Mantenha o restante das variáveis como antes) */ /* ==================================== */ /* Fontes */ --font-family-primary: 'Inter', sans-serif; --font-family-secondary: 'Georgia', serif; /* Para um estilo mais distinto, se necessário */ /* Tamanhos de Fonte (Escala Modular) */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-h3: 1.5rem; --font-size-h2: 2rem; --font-size-h1: 3rem; /* Pesos de Fonte */ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ==================================== */ /* 4. Espaçamento (Baseado em 8px) */ /* ==================================== */ --spacing-xxs: 4px; --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-xxl: 48px; /* Alias para o Gutter do Grid */ --spacing-gutter: var(--spacing-lg); /* 24px para o seu grid */ /* ==================================== */ /* 5. Bordas e Sombra */ /* ==================================== */ /* Raio da Borda */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-default: 8px; /* Seu Padrão */ --radius-lg: 12px; --radius-xl: 16px; /* Seu Big */ --radius-full: 50%; /* Linhas e Bordas */ --clr-border: hsla(240, 5%, 25%, 1); /* Sua cor de borda */ --clr-border-light: hsla(240, 5%, 35%, 1); --clr-border-dark: hsla(240, 5%, 15%, 1); --border-thin: 1px solid var(--clr-border); --border-medium: 2px solid var(--clr-border); /* Sombras (Tons de fundo escuro para o tema) */ --shadow-sm: 0 1px 3px hsla(var(--clr-black-pure), 0.5); --shadow-default: 0 4px 10px hsla(240, 5%, 5%, 0.5); /* Seu Padrão */ --shadow-lg: 0 8px 25px hsla(240, 5%, 5%, 0.7); --shadow-accent: 0 0 15px var(--clr-accent-d); /* Sombra de cor de destaque */ /* ==================================== */ /* 6. Transições e Z-Index */ /* ==================================== */ /* Transições de Animação */ --transition-fast: 0.15s ease-out; --transition-default: 0.3s ease-in-out; --transition-slow: 0.5s ease; }