83 lines
3.3 KiB
CSS
83 lines
3.3 KiB
CSS
/* Importar fontes do Google Fonts */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Arimo:wght@400;500;600;700&family=Fira+Code:wght@400;600&display=swap');
|
|
|
|
@layer theme {
|
|
:root {
|
|
/* Fontes */
|
|
--font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
--font-arimo: 'Arimo', ui-sans-serif, system-ui, sans-serif;
|
|
--font-fira-code: 'Fira Code', ui-monospace, 'SFMono-Regular', monospace;
|
|
|
|
/* Paleta de cores principais */
|
|
--color-brand-50: #f0f9ff;
|
|
--color-brand-100: #e0f2fe;
|
|
--color-brand-200: #bae6fd;
|
|
--color-brand-300: #7dd3fc;
|
|
--color-brand-400: #38bdf8;
|
|
--color-brand-500: #0ea5e9;
|
|
--color-brand-600: #0284c7;
|
|
--color-brand-700: #0369a1;
|
|
--color-brand-800: #075985;
|
|
--color-brand-900: #0c4a6e;
|
|
--color-brand-950: #082f49;
|
|
|
|
/* 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;
|
|
|
|
/* Gradientes */
|
|
--gradient-primary: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%);
|
|
--gradient-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
|
--color-brand-from: #ff3a05;
|
|
--color-brand-to: #ff0080;
|
|
--color-gradient-brand: linear-gradient(135deg, var(--color-brand-from) 0%, var(--color-brand-to) 100%);
|
|
--color-brand-from-10: color-mix(in srgb, var(--color-brand-from) 10%, transparent);
|
|
--color-brand-from-20: color-mix(in srgb, var(--color-brand-from) 20%, transparent);
|
|
--color-brand-to-10: color-mix(in srgb, var(--color-brand-to) 10%, transparent);
|
|
--color-brand-to-20: color-mix(in srgb, var(--color-brand-to) 20%, transparent);
|
|
--color-brand-shadow-20: color-mix(in srgb, var(--color-brand-from) 20%, transparent);
|
|
|
|
/* Focus ring */
|
|
--focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.3);
|
|
}
|
|
|
|
.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;
|
|
|
|
/* Ajustando gradientes para dark */
|
|
--gradient-primary: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-brand-800) 100%);
|
|
}
|
|
} |