/* ========================================================================== Theme tokens — colour palette, spacing, radii, shadows, typography scale. Light theme is the default; [data-theme="dark"] overrides below. ========================================================================== */ :root { /* Brand palette — burnt orange / terracotta / copper / rust family */ --color-primary: #c1440e; --color-primary-dark: #9a3609; --color-primary-light: #e2703a; --color-terracotta: #c3673b; --color-copper: #8b5a3c; --color-rust: #b7410e; --color-gold: #d9a441; --color-gold-light: #f0cd8a; --color-light-brown: #a9785a; /* Neutrals */ --color-grey-50: #faf8f6; --color-grey-100: #f3efe9; --color-grey-200: #e7e0d8; --color-grey-300: #d6cbbe; --color-grey-400: #b3a494; --color-grey-500: #8a7a6a; --color-grey-600: #665849; --color-grey-700: #4a3f34; --color-grey-800: #2f271f; --color-grey-900: #1c1712; /* Surfaces & text */ --color-bg: #e9e9e7; --color-surface: #f5f5f4; --color-surface-raised: #f5f5f4; --color-text: var(--color-grey-800); --color-text-muted: var(--color-grey-600); --color-text-inverse: #ffffff; --color-border: var(--color-grey-200); --color-hover-bg: var(--color-grey-100); /* Semantic */ --color-success: #3f7d4f; --color-success-bg: #e7f3ea; --color-danger: #b3261e; --color-danger-bg: #fbeae9; --color-warning: #a86a12; --color-warning-bg: #fbf1de; --color-info: #2f6690; --color-info-bg: #e8f1f8; /* Gradients */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-rust) 100%); --gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-terracotta) 100%); /* Typography */ --font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2.25rem; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; /* Radii & shadows */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(28, 23, 18, 0.06), 0 1px 1px rgba(28, 23, 18, 0.04); --shadow-md: 0 4px 12px rgba(28, 23, 18, 0.08), 0 2px 4px rgba(28, 23, 18, 0.05); --shadow-lg: 0 12px 28px rgba(28, 23, 18, 0.14), 0 4px 10px rgba(28, 23, 18, 0.08); --transition-fast: 150ms ease; --transition-base: 220ms ease; --transition-slow: 380ms ease; } /* Dark theme override, toggled via [data-theme="dark"] on */ :root[data-theme="dark"] { --color-bg: #17130f; --color-surface: #221c17; --color-surface-raised: #2a221b; --color-text: #f3ede6; --color-text-muted: #c9bcae; --color-text-inverse: #1c1712; --color-border: #3a3025; --color-hover-bg: #332a21; --color-success-bg: #1c2d20; --color-danger-bg: #331d1b; --color-warning-bg: #332616; --color-info-bg: #1b2733; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5); } /* Respect system preference when the user hasn't explicitly chosen */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #17130f; --color-surface: #221c17; --color-surface-raised: #2a221b; --color-text: #f3ede6; --color-text-muted: #c9bcae; --color-text-inverse: #1c1712; --color-border: #3a3025; --color-hover-bg: #332a21; --color-success-bg: #1c2d20; --color-danger-bg: #331d1b; --color-warning-bg: #332616; --color-info-bg: #1b2733; } }