211 lines
7.1 KiB
CSS
211 lines
7.1 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* =============================================================================
|
|
GREYHAVEN DESIGN TOKENS
|
|
Based on Greyhaven Brand Guidelines v1.0
|
|
|
|
Color Philosophy:
|
|
- Neutral and minimal scheme
|
|
- Off-black, warm grey, and white form the base
|
|
- Single accent (orange) used sparingly for active/important states
|
|
- No gradients, no decorative color
|
|
============================================================================= */
|
|
|
|
:root {
|
|
/* Background & Foreground */
|
|
--background: 240 240 236; /* Grey 1 #F0F0EC */
|
|
--foreground: 22 22 20; /* Off-black #161614 */
|
|
|
|
/* Card */
|
|
--card: 249 249 247; /* Off-white #F9F9F7 - elevated from background */
|
|
--card-foreground: 22 22 20;
|
|
|
|
/* Popover */
|
|
--popover: 249 249 247;
|
|
--popover-foreground: 22 22 20;
|
|
|
|
/* Primary - Orange accent (used sparingly) */
|
|
--primary: 217 94 42; /* Orange #D95E2A */
|
|
--primary-foreground: 249 249 247; /* Off-white */
|
|
|
|
/* Secondary */
|
|
--secondary: 240 240 236; /* Grey 1 #F0F0EC */
|
|
--secondary-foreground: 47 47 44; /* Grey 8 #2F2F2C */
|
|
|
|
/* Muted */
|
|
--muted: 240 240 236; /* Grey 1 #F0F0EC */
|
|
--muted-foreground: 87 87 83; /* Grey 7 #575753 */
|
|
|
|
/* Accent - Subtle grey for hover states */
|
|
--accent: 221 221 215; /* Grey 2 #DDDDD7 */
|
|
--accent-foreground: 22 22 20; /* Off-black */
|
|
|
|
/* Destructive */
|
|
--destructive: 180 50 50; /* Muted red for destructive actions */
|
|
--destructive-foreground: 249 249 247;
|
|
|
|
/* Borders & Inputs */
|
|
--border: 196 196 189; /* Grey 3 #C4C4BD */
|
|
--input: 196 196 189; /* Grey 3 #C4C4BD */
|
|
|
|
/* Focus Ring */
|
|
--ring: 217 94 42; /* Orange for focus states */
|
|
|
|
/* Charts - Warm neutral palette with orange accent */
|
|
--chart-1: 217 94 42; /* Orange accent */
|
|
--chart-2: 87 87 83; /* Grey 7 */
|
|
--chart-3: 127 127 121; /* Grey 5 */
|
|
--chart-4: 166 166 159; /* Grey 4 */
|
|
--chart-5: 47 47 44; /* Grey 8 */
|
|
|
|
/* Radius - Tightened, no playful rounding */
|
|
--radius: 0.375rem;
|
|
|
|
/* Sidebar */
|
|
--sidebar: 240 240 236;
|
|
--sidebar-foreground: 22 22 20;
|
|
--sidebar-primary: 217 94 42;
|
|
--sidebar-primary-foreground: 249 249 247;
|
|
--sidebar-accent: 196 196 189;
|
|
--sidebar-accent-foreground: 22 22 20;
|
|
--sidebar-border: 196 196 189;
|
|
--sidebar-ring: 217 94 42;
|
|
}
|
|
|
|
/* =============================================================================
|
|
DARK THEME
|
|
Guidelines: Negative/reverse usage via off-black and greys
|
|
============================================================================= */
|
|
|
|
.dark {
|
|
/* Background & Foreground */
|
|
--background: 22 22 20; /* Off-black #161614 */
|
|
--foreground: 249 249 247; /* Off-white #F9F9F7 */
|
|
|
|
/* Card */
|
|
--card: 47 47 44; /* Grey 8 #2F2F2C */
|
|
--card-foreground: 249 249 247;
|
|
|
|
/* Popover */
|
|
--popover: 47 47 44;
|
|
--popover-foreground: 249 249 247;
|
|
|
|
/* Primary - Orange accent (same in dark mode) */
|
|
--primary: 217 94 42; /* Orange #D95E2A */
|
|
--primary-foreground: 249 249 247;
|
|
|
|
/* Secondary */
|
|
--secondary: 87 87 83; /* Grey 7 #575753 */
|
|
--secondary-foreground: 249 249 247;
|
|
|
|
/* Muted */
|
|
--muted: 87 87 83; /* Grey 7 #575753 */
|
|
--muted-foreground: 196 196 189; /* Grey 3 #C4C4BD */
|
|
|
|
/* Accent - Subtle grey for hover states */
|
|
--accent: 87 87 83; /* Grey 7 #575753 */
|
|
--accent-foreground: 249 249 247;
|
|
|
|
/* Destructive */
|
|
--destructive: 180 50 50;
|
|
--destructive-foreground: 249 249 247;
|
|
|
|
/* Borders & Inputs */
|
|
--border: 87 87 83; /* Grey 7 */
|
|
--input: 87 87 83;
|
|
|
|
/* Focus Ring */
|
|
--ring: 217 94 42;
|
|
|
|
/* Charts */
|
|
--chart-1: 217 94 42;
|
|
--chart-2: 196 196 189;
|
|
--chart-3: 166 166 159;
|
|
--chart-4: 127 127 121;
|
|
--chart-5: 240 240 236;
|
|
|
|
/* Sidebar */
|
|
--sidebar: 47 47 44;
|
|
--sidebar-foreground: 249 249 247;
|
|
--sidebar-primary: 217 94 42;
|
|
--sidebar-primary-foreground: 249 249 247;
|
|
--sidebar-accent: 87 87 83;
|
|
--sidebar-accent-foreground: 249 249 247;
|
|
--sidebar-border: 87 87 83;
|
|
--sidebar-ring: 217 94 42;
|
|
}
|
|
|
|
/* =============================================================================
|
|
THEME CONFIGURATION
|
|
Typography: Source Serif Pro (primary) + Aspekta (secondary/UI)
|
|
============================================================================= */
|
|
|
|
@theme inline {
|
|
/* Typography - Using CSS variables from Next.js font loading */
|
|
--font-sans: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
/* Color mappings */
|
|
--color-background: rgb(var(--background));
|
|
--color-foreground: rgb(var(--foreground));
|
|
--color-card: rgb(var(--card));
|
|
--color-card-foreground: rgb(var(--card-foreground));
|
|
--color-popover: rgb(var(--popover));
|
|
--color-popover-foreground: rgb(var(--popover-foreground));
|
|
--color-primary: rgb(var(--primary));
|
|
--color-primary-foreground: rgb(var(--primary-foreground));
|
|
--color-secondary: rgb(var(--secondary));
|
|
--color-secondary-foreground: rgb(var(--secondary-foreground));
|
|
--color-muted: rgb(var(--muted));
|
|
--color-muted-foreground: rgb(var(--muted-foreground));
|
|
--color-accent: rgb(var(--accent));
|
|
--color-accent-foreground: rgb(var(--accent-foreground));
|
|
--color-destructive: rgb(var(--destructive));
|
|
--color-destructive-foreground: rgb(var(--destructive-foreground));
|
|
--color-border: rgb(var(--border));
|
|
--color-input: rgb(var(--input));
|
|
--color-ring: rgb(var(--ring));
|
|
--color-chart-1: rgb(var(--chart-1));
|
|
--color-chart-2: rgb(var(--chart-2));
|
|
--color-chart-3: rgb(var(--chart-3));
|
|
--color-chart-4: rgb(var(--chart-4));
|
|
--color-chart-5: rgb(var(--chart-5));
|
|
--radius-sm: calc(var(--radius) - 2px);
|
|
--radius-md: var(--radius);
|
|
--radius-lg: calc(var(--radius) + 2px);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-sidebar: rgb(var(--sidebar));
|
|
--color-sidebar-foreground: rgb(var(--sidebar-foreground));
|
|
--color-sidebar-primary: rgb(var(--sidebar-primary));
|
|
--color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
|
|
--color-sidebar-accent: rgb(var(--sidebar-accent));
|
|
--color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
|
|
--color-sidebar-border: rgb(var(--sidebar-border));
|
|
--color-sidebar-ring: rgb(var(--sidebar-ring));
|
|
|
|
/* Greyhaven-specific colors for direct use */
|
|
--color-greyhaven-orange: #D95E2A;
|
|
--color-greyhaven-offblack: #161614;
|
|
--color-greyhaven-offwhite: #F9F9F7;
|
|
--color-greyhaven-grey1: #F0F0EC;
|
|
--color-greyhaven-grey2: #DDDDD7;
|
|
--color-greyhaven-grey3: #C4C4BD;
|
|
--color-greyhaven-grey4: #A6A69F;
|
|
--color-greyhaven-grey5: #7F7F79;
|
|
--color-greyhaven-grey7: #575753;
|
|
--color-greyhaven-grey8: #2F2F2C;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|