/* * Global CSS Variables * Defines color palettes, typography rules, and spacing for the application. * Update for each project by changing the values below. */ :root { /* -- Colors: Light Mode -- */ --color-primary: #171818; --color-primary-hover: #2C2C2C; --color-primary-dark: #2C2C2C; --color-secondary: #5A614F; --color-secondary-dark:#424939; --color-clay: #B58B75; --color-clay-text: #855A46; --color-clay-solid: #855A46; --color-sage: #7D8471; --color-white: #FFFFFF; --color-on-dark: #FFF8EF; --color-panel-dark: #171818; --color-panel-dark-soft: #2D2D2C; --color-panel-dark-deep: #11100F; --color-success: #5FA872; --color-danger: #BA1A1A; --color-danger-dark: #93000A; --color-star: #B58B75; --color-bg: #FAF9F7; --color-surface: #FFFFFF; --color-surface-alt: #F4F3F1; --color-text: #1A1C1B; --color-text-muted: #444748; --color-text-inverse: #FFFFFF; --color-border: #E5E3DF; --color-border-strong: #C4C7C7; /* Aliases for DESIGN.md compatibility */ --bg-page: var(--color-bg); --bg-panel: var(--color-surface); --text-main: var(--color-text); --text-secondary: var(--color-text-muted); --border-main: var(--color-border); /* -- Typography -- */ --font-heading: 'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* -- Layout and Depth -- */ --shadow-soft: 0 4px 20px rgba(44, 44, 44, 0.04); --shadow-sm: var(--shadow-soft); --shadow-floating: 0 10px 30px rgba(44, 44, 44, 0.08); --radius-btn: 9999px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-card: 8px; --container-max: 1280px; } /* * Dark Mode Configuration * Class 'dark' applied to element */ html.dark { --color-bg: #171412; --color-surface: #211D1A; --color-surface-alt: #2A241F; --color-primary: #C8C6C5; --color-primary-hover: #E4E2E1; --color-primary-dark: #E4E2E1; --color-clay-text: #D6A98F; --color-clay-solid: #855A46; --color-success: #9FD8AE; --color-danger: #EF5350; --color-danger-dark: #E53935; --color-star: #F5A623; --color-text: #F7F0EA; --color-text-muted: #B8AAA0; --color-text-inverse: #171412; --color-border: rgba(255, 255, 255, 0.12); --bg-page: var(--color-bg); --bg-panel: var(--color-surface); --text-main: var(--color-text); --text-secondary: var(--color-text-muted); --border-main: var(--color-border); --shadow-sm: 0 4px 32px rgba(255, 255, 255, 0.05); }