diff --git a/src/app/globals.css b/src/app/globals.css index 26b14d7..f5f5e3e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -36,6 +36,36 @@ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } +@layer base { + .dark { + --color-bg-base: #0f1614; + --color-bg-surface: #17221f; + --color-bg-surface-alt: #1e2d28; + --color-bg-callout: #1a332a; + --color-primary: #4ab2b2; + --color-primary-hover: #5ec7c7; + --color-primary-light: #6cd1d1; + --color-text-heading: #e4f0ec; + --color-text-body: #c3d9d3; + --color-text-secondary: #9cb8b0; + --color-text-muted: #6b8a81; + --color-border: #38524a; + --color-border-light: #253832; + --color-success: #4ade80; + --color-success-bg: #143621; + --color-error: #f87171; + --color-error-bg: #3b1c1c; + --color-badge-bg: #214035; + --color-badge-text: #6fd6b8; + --color-danger: #ef4444; + --color-danger-hover: #f87171; + + --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); + --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4); + --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); + } +} + /* ── Base Styles ── */ body { background: var(--color-bg-base); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 98f67c0..d598cbd 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,6 +20,21 @@ export default function RootLayout({ }>) { return ( + +