@layer theme { :root { /* Gradientes */ --gradient: linear-gradient(135deg, #ff3a05, #ff0080); --gradient-text: linear-gradient(to right, #ff3a05, #ff0080); --gradient-primary: linear-gradient(135deg, #ff3a05, #ff0080); --color-gradient-brand: linear-gradient(135deg, #ff3a05, #ff0080); /* Cores sólidas de marca (usadas em textos/bordas) */ --brand-color: #ff3a05; --brand-color-strong: #ff0080; --brand-rgb: 255 58 5; --brand-strong-rgb: 255 0 128; /* Escala de cores da marca */ --color-brand-50: #fff1f0; --color-brand-100: #ffe0dd; --color-brand-200: #ffc7c0; --color-brand-300: #ffa094; --color-brand-400: #ff6b57; --color-brand-500: #ff3a05; --color-brand-600: #ff0080; --color-brand-700: #d6006a; --color-brand-800: #ad0058; --color-brand-900: #8a004a; /* Superfícies e tipografia */ --color-surface-light: #ffffff; --color-surface-dark: #0a0a0a; --color-surface-muted: #f5f7fb; --color-surface-card: #ffffff; --color-border-strong: rgba(15, 23, 42, 0.08); --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-inverse: #f8fafc; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-gray-950: #030712; /* Espaçamento */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; } .dark { /* Invertendo superfícies e texto para dark mode */ --color-surface-light: #020617; --color-surface-dark: #f8fafc; --color-surface-muted: #0b1220; --color-surface-card: #0f172a; --color-border-strong: rgba(148, 163, 184, 0.25); --color-text-primary: #f8fafc; --color-text-secondary: #cbd5f5; --color-text-inverse: #0f172a; /* Cores da marca com maior contraste para dark mode */ --color-brand-50: #4a0029; --color-brand-100: #660037; --color-brand-200: #8a004a; --color-brand-300: #ad0058; --color-brand-400: #d6006a; --color-brand-500: #ff0080; --color-brand-600: #ff3a05; --color-brand-700: #ff6b57; --color-brand-800: #ffa094; --color-brand-900: #ffc7c0; } }