170 lines
5.7 KiB
CSS
170 lines
5.7 KiB
CSS
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 209 40% 96%;
|
|
--foreground: 222 47% 11%;
|
|
--card: 210 40% 98%;
|
|
--card-foreground: 222 47% 11%;
|
|
--popover: 214 31% 91%;
|
|
--popover-foreground: 222 47% 11%;
|
|
--primary: 200 98% 39%;
|
|
--primary-foreground: 204 100% 97%;
|
|
--secondary: 215 24% 26%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 215 20% 65%;
|
|
--muted-foreground: 222 47% 11%;
|
|
--accent: 210 40% 98%;
|
|
--accent-foreground: 215 19% 34%;
|
|
--destructive: 0 72% 50%;
|
|
--destructive-foreground: 0 85% 97%;
|
|
--border: 212 26% 83%;
|
|
--input: 212 26% 83%;
|
|
--ring: 200 98% 39%;
|
|
--chart-1: 198 93% 59%;
|
|
--chart-2: 213 93% 67%;
|
|
--chart-3: 215 20% 65%;
|
|
--chart-4: 215 16% 46%;
|
|
--chart-5: 215 19% 34%;
|
|
--radius: 0.5rem;
|
|
|
|
/* Dynamic blue theme enhancements */
|
|
--primary-strong: 222 89% 63%;
|
|
--gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-strong)));
|
|
--shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
|
|
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Sidebar variables */
|
|
--sidebar-background: 0 0% 98%;
|
|
--sidebar-foreground: 222 47% 11%;
|
|
--sidebar-primary: 200 98% 39%;
|
|
--sidebar-primary-foreground: 204 100% 97%;
|
|
--sidebar-accent: 215 24% 26%;
|
|
--sidebar-accent-foreground: 210 40% 98%;
|
|
--sidebar-border: 212 26% 83%;
|
|
--sidebar-ring: 200 98% 39%;
|
|
--sidebar: 210 40% 98%;
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
|
--font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222 47% 11%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 217 32% 17%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 215 24% 26%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 198 93% 59%;
|
|
--primary-foreground: 204 80% 15%;
|
|
--secondary: 212 26% 83%;
|
|
--secondary-foreground: 228 84% 4%;
|
|
--muted: 215 16% 46%;
|
|
--muted-foreground: 210 40% 98%;
|
|
--accent: 228 84% 4%;
|
|
--accent-foreground: 215 20% 65%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 85% 97%;
|
|
--border: 215 19% 34%;
|
|
--input: 215 19% 34%;
|
|
--ring: 198 93% 59%;
|
|
--chart-1: 199 95% 73%;
|
|
--chart-2: 211 96% 78%;
|
|
--chart-3: 215 20% 65%;
|
|
--chart-4: 215 16% 46%;
|
|
--chart-5: 215 19% 34%;
|
|
|
|
/* Sidebar dark variables */
|
|
--sidebar-background: 240 5.9% 10%;
|
|
--sidebar-foreground: 210 40% 98%;
|
|
--sidebar-primary: 198 93% 59%;
|
|
--sidebar-primary-foreground: 204 80% 15%;
|
|
--sidebar-accent: 215 20% 65%;
|
|
--sidebar-accent-foreground: 228 84% 4%;
|
|
--sidebar-border: 215 19% 34%;
|
|
--sidebar-ring: 198 93% 59%;
|
|
--sidebar: 217 32% 17%;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: "Inter", sans-serif;
|
|
}
|
|
}
|
|
|
|
/* Definir cores no Tailwind */
|
|
.sidebar {
|
|
background-color: hsl(var(--sidebar-background));
|
|
color: hsl(var(--sidebar-foreground));
|
|
}
|
|
|
|
.sidebar-accent {
|
|
background-color: hsl(var(--sidebar-accent));
|
|
color: hsl(var(--sidebar-accent-foreground));
|
|
}
|
|
|
|
.sidebar-border {
|
|
border-color: hsl(var(--sidebar-border));
|
|
}
|
|
|
|
@layer utilities {
|
|
.bg-gradient-primary {
|
|
background-image: var(--gradient-primary);
|
|
}
|
|
|
|
.btn-gradient {
|
|
color: hsl(var(--primary-foreground));
|
|
background-image: var(--gradient-primary);
|
|
box-shadow: var(--shadow-elegant);
|
|
transition: var(--transition-smooth);
|
|
}
|
|
.btn-gradient:hover {
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
.glass-card {
|
|
background-color: hsl(var(--card) / 0.8);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid hsl(var(--border) / 0.4);
|
|
box-shadow: var(--shadow-elegant);
|
|
}
|
|
|
|
.brand-text {
|
|
font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
|
|
background-image: var(--gradient-primary);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
} |