157 lines
4.8 KiB
CSS
157 lines
4.8 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--on-background);
|
|
--font-sans: var(--font-nunito-sans);
|
|
--font-serif: var(--font-literata);
|
|
--font-mono: var(--font-geist-mono);
|
|
--font-heading: var(--font-literata);
|
|
|
|
--color-surface: var(--surface);
|
|
--color-surface-dim: var(--surface-dim);
|
|
--color-surface-bright: var(--surface-bright);
|
|
--color-surface-container-lowest: var(--surface-container-lowest);
|
|
--color-surface-container-low: var(--surface-container-low);
|
|
--color-surface-container: var(--surface-container);
|
|
--color-surface-container-high: var(--surface-container-high);
|
|
--color-surface-container-highest: var(--surface-container-highest);
|
|
--color-on-surface: var(--on-surface);
|
|
--color-on-surface-variant: var(--on-surface-variant);
|
|
--color-inverse-surface: var(--inverse-surface);
|
|
--color-inverse-on-surface: var(--inverse-on-surface);
|
|
|
|
--color-outline: var(--outline);
|
|
--color-outline-variant: var(--outline-variant);
|
|
|
|
--color-primary: var(--primary);
|
|
--color-on-primary: var(--on-primary);
|
|
--color-primary-container: var(--primary-container);
|
|
--color-on-primary-container: var(--on-primary-container);
|
|
--color-inverse-primary: var(--inverse-primary);
|
|
|
|
--color-secondary: var(--secondary);
|
|
--color-on-secondary: var(--on-secondary);
|
|
--color-secondary-container: var(--secondary-container);
|
|
--color-on-secondary-container: var(--on-secondary-container);
|
|
|
|
--color-tertiary: var(--tertiary);
|
|
--color-on-tertiary: var(--on-tertiary);
|
|
--color-tertiary-container: var(--tertiary-container);
|
|
--color-on-tertiary-container: var(--on-tertiary-container);
|
|
|
|
--color-error: var(--error);
|
|
--color-on-error: var(--on-error);
|
|
--color-error-container: var(--error-container);
|
|
--color-on-error-container: var(--on-error-container);
|
|
|
|
--color-accent-pink: var(--accent-pink);
|
|
|
|
/* shadcn mappings */
|
|
--color-border: var(--outline-variant);
|
|
--color-input: var(--outline-variant);
|
|
--color-ring: var(--primary);
|
|
--color-muted: var(--surface-container-highest);
|
|
--color-muted-foreground: var(--on-surface-variant);
|
|
--color-accent: var(--tertiary);
|
|
--color-accent-foreground: var(--on-tertiary);
|
|
--color-card: var(--surface);
|
|
--color-card-foreground: var(--on-surface);
|
|
--color-popover: var(--surface);
|
|
--color-popover-foreground: var(--on-surface);
|
|
--color-destructive: var(--error);
|
|
--color-destructive-foreground: var(--on-error);
|
|
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 1rem;
|
|
--radius-xl: 1.5rem;
|
|
--radius-2xl: 2rem;
|
|
--radius-full: 9999px;
|
|
|
|
--spacing-unit: 8px;
|
|
--spacing-container-max: 1200px;
|
|
--spacing-gutter: 24px;
|
|
--spacing-margin-mobile: 20px;
|
|
--spacing-section-gap: 80px;
|
|
}
|
|
|
|
:root {
|
|
/* Aegean Coastal Sanctuary Palette */
|
|
--surface: #f6fafb;
|
|
--surface-dim: #d7dbdc;
|
|
--surface-bright: #f6fafb;
|
|
--surface-container-lowest: #ffffff;
|
|
--surface-container-low: #f1f4f5;
|
|
--surface-container: #ebeef0;
|
|
--surface-container-high: #e5e9ea;
|
|
--surface-container-highest: #dfe3e4;
|
|
--on-surface: #181c1d;
|
|
--on-surface-variant: #3e494b;
|
|
--inverse-surface: #2d3132;
|
|
--inverse-on-surface: #eef1f2;
|
|
--outline: #6e797c;
|
|
--outline-variant: #bdc8cb;
|
|
--surface-tint: #006877;
|
|
--primary: #006574;
|
|
--on-primary: #ffffff;
|
|
--primary-container: #088092;
|
|
--on-primary-container: #f8fdff;
|
|
--inverse-primary: #78d4e7;
|
|
--secondary: #705a4c;
|
|
--on-secondary: #ffffff;
|
|
--secondary-container: #f8dac8;
|
|
--on-secondary-container: #755e50;
|
|
--tertiary: #8a4c17;
|
|
--on-tertiary: #ffffff;
|
|
--tertiary-container: #a7642e;
|
|
--on-tertiary-container: #fffbff;
|
|
--error: #ba1a1a;
|
|
--on-error: #ffffff;
|
|
--error-container: #ffdad6;
|
|
--on-error-container: #93000a;
|
|
--background: #f6fafb;
|
|
--on-background: #181c1d;
|
|
|
|
--accent-pink: #d46a8c;
|
|
|
|
/* Fluid Typography from Design System */
|
|
--text-hero: clamp(3rem, 8vw, 8rem);
|
|
--text-h1: 48px;
|
|
--text-h2: 32px;
|
|
--text-h3: 24px;
|
|
--text-body-lg: 18px;
|
|
--text-body-md: 16px;
|
|
--text-label-lg: 14px;
|
|
}
|
|
|
|
/* For simplicity, map dark mode to slightly adjusted values if needed, or leave as is if dark mode isn't explicitly defined in design.md */
|
|
.dark {
|
|
--background: #181c1d;
|
|
--on-background: #f6fafb;
|
|
--surface: #181c1d;
|
|
--on-surface: #e5e9ea;
|
|
--primary: #78d4e7;
|
|
--on-primary: #00363f;
|
|
--secondary: #dec1af;
|
|
--on-secondary: #3e2d22;
|
|
--tertiary: #ffb782;
|
|
--on-tertiary: #4c2700;
|
|
--outline-variant: #3e494b;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
h1 { font-size: var(--text-h1); line-height: 1.2; font-weight: 600; }
|
|
h2 { font-size: var(--text-h2); line-height: 1.3; font-weight: 600; }
|
|
h3 { font-size: var(--text-h3); line-height: 1.4; font-weight: 500; }
|
|
} |