/* ============================================================ THEME.CSS — Dark / Light mode CSS custom properties Default: data-theme="dark" on ============================================================ */ /* ── Timing scale (theme-independent) ──────────────────────── */ :root { --t-fast: 0.22s ease; /* colour, opacity, border */ --t-base: 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* transform, shadow */ --t-slow: 0.68s cubic-bezier(0.4, 0, 0.2, 1); /* large reveals */ } :root, [data-theme="dark"] { --bg-primary: #111111; --bg-primary-rgb: 17, 17, 17; --bg-secondary: #1a1a1a; --bg-card: #1f1f1f; --text-primary: #f0f0f0; --text-secondary:#999999; --text-muted: #555555; --accent: #c9a84c; --accent-dim: rgba(201, 168, 76, 0.12); --border: #2a2a2a; --border-light: #333333; --nav-bg: rgba(17, 17, 17, 0.92); --shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.6); /* Gold-touch: used for elevated hover states across the site */ --shadow-hover-accent: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 168, 76, 0.18), 0 0 28px rgba(201, 168, 76, 0.07); --bp-bg: #f5f4ef; --bp-text: #111111; --bp-border: #cccccc; } [data-theme="light"] { --bg-primary: #ffffff; --bg-primary-rgb: 255, 255, 255; --bg-secondary: #f5f5f5; --bg-card: #ffffff; --text-primary: #111111; --text-secondary:#666666; --text-muted: #aaaaaa; --accent: #1e293b; --accent-dim: rgba(30, 41, 59, 0.08); --border: #dddddd; --border-light: #eeeeee; --nav-bg: rgba(245, 245, 245, 0.92); --shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.15); --shadow-hover-accent: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(30, 41, 59, 0.14), 0 0 28px rgba(30, 41, 59, 0.05); --bp-bg: #f5f4ef; --bp-text: #111111; --bp-border: #cccccc; }