geo/frontend/app/globals.css

117 lines
3.1 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
/* GEO Design System - Light Mode */
--background: 220 14% 98%; /* #FAFBFC */
--foreground: 220 87% 12%; /* #111827 */
--card: 0 0% 100%; /* #FFFFFF */
--card-foreground: 220 87% 12%;
--popover: 0 0% 100%;
--popover-foreground: 220 87% 12%;
--primary: 161 94% 39%; /* #10B981 */
--primary-foreground: 0 0% 100%;
--secondary: 220 9% 46%; /* #6B7280 secondary text as bg */
--secondary-foreground: 0 0% 100%;
--muted: 220 14% 96%;
--muted-foreground: 220 9% 62%; /* #9CA3AF */
--accent: 24 95% 53%; /* #F97316 orange */
--accent-foreground: 0 0% 100%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 220 13% 91%; /* #E5E7EB */
--input: 220 13% 91%;
--ring: 161 94% 39%; /* primary green */
--radius: 1rem; /* 16px base radius */
/* GEO Custom tokens */
--geo-nav-bg: #FFFFFF;
--geo-nav-hover: #F3F4F6;
--geo-nav-active: #10B981;
--geo-nav-text: #374151;
--geo-nav-text-active: #059669;
--geo-nav-active-bg: #ECFDF5;
--geo-shadow-card: 0 1px 3px rgba(0,0,0,0.04);
--geo-shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06);
--geo-transition: 200ms ease;
}
.dark {
/* GEO Design System - Dark Mode */
--background: 222 47% 8%;
--foreground: 210 40% 96%;
--card: 222 47% 10%;
--card-foreground: 210 40% 96%;
--popover: 222 47% 10%;
--popover-foreground: 210 40% 96%;
--primary: 161 94% 39%; /* keep green */
--primary-foreground: 0 0% 100%;
--secondary: 217 33% 18%;
--secondary-foreground: 210 40% 96%;
--muted: 217 33% 15%;
--muted-foreground: 215 20% 60%;
--accent: 24 95% 53%; /* keep orange */
--accent-foreground: 0 0% 100%;
--destructive: 0 63% 40%;
--destructive-foreground: 210 40% 96%;
--border: 217 33% 18%;
--input: 217 33% 18%;
--ring: 161 94% 39%;
}
@layer base {
* {
@apply border-border;
}
html {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
@apply bg-background text-foreground;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
/* GEO Card hover effect */
.geo-card {
@apply bg-white rounded-lg border border-geo-border shadow-card transition-all duration-200;
}
.geo-card:hover {
@apply shadow-card-hover border-primary/30;
}
/* GEO Scrollbar */
.geo-scrollbar::-webkit-scrollbar {
width: 4px;
}
.geo-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.geo-scrollbar::-webkit-scrollbar-thumb {
@apply bg-border rounded-full;
}
/* Number stat display */
.stat-number {
@apply text-4xl font-bold tracking-tight text-geo-text-primary;
font-variant-numeric: tabular-nums;
}
/* Bento grid */
.bento-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}