/* ========================================================================= themes.css — 3 theme token sets (ARCHITECTURE.md §6 token contract) Selected by [data-theme="..."] on (SSR-injected, no FOUC). Token contract (every theme defines all of these): --bg --surface --text --muted --primary --primary-contrast --accent --border --radius --shadow --font-display --font-body Components reference ONLY these tokens (+ a few derived helpers below). No external fonts / no CDN — tasteful local system stacks. ========================================================================= */ /* ---- Shared font stacks (local, no network) -------------------------- */ :root { --stack-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --stack-serif: ui-serif, Georgia, Cambria, "Times New Roman", "Noto Serif", "PT Serif", serif; --stack-rounded: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, "Noto Sans", sans-serif; } /* ========================================================================= 1. Elegant Minimal — DEFAULT (light beige-pink) Applied on :root too, so the page is correct even without the attribute. ========================================================================= */ :root, [data-theme="elegant-minimal"] { --bg: #faf6f2; --bg-alt: #f3ebe3; --surface: #ffffff; --surface-alt: #fbf6f1; --text: #2b2622; --muted: #8c7f74; --primary: #c79a8a; --primary-strong: #b6826f; --primary-soft: #f0e0d8; --primary-contrast: #ffffff; --accent: #e8c8bf; --border: #ece2d9; --ring: rgba(199, 154, 138, 0.35); --radius: 18px; --radius-sm: 12px; --radius-lg: 28px; --shadow: 0 12px 40px -14px rgba(120, 90, 70, 0.28); --shadow-sm: 0 6px 20px -10px rgba(120, 90, 70, 0.25); --overlay: rgba(43, 38, 34, 0.42); --star: #d6a15a; --success: #5c8a64; --danger: #c0584f; --font-display: var(--stack-serif); --font-body: var(--stack-sans); --header-blur: saturate(1.1) blur(10px); color-scheme: light; } /* ========================================================================= 2. Luxury Dark — black + gold ========================================================================= */ [data-theme="luxury-dark"] { --bg: #14110f; --bg-alt: #1a1613; --surface: #1d1916; --surface-alt: #221d19; --text: #f2ece4; --muted: #a99e8e; --primary: #c9a35a; --primary-strong: #d8b873; --primary-soft: #2c2418; --primary-contrast: #14110f; --accent: #7a5c2e; --border: #2e2820; --ring: rgba(201, 163, 90, 0.4); --radius: 16px; --radius-sm: 11px; --radius-lg: 24px; --shadow: 0 18px 54px -18px rgba(0, 0, 0, 0.72); --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.7); --overlay: rgba(0, 0, 0, 0.66); --star: #d8b873; --success: #8bbf8f; --danger: #e08b83; --font-display: var(--stack-serif); --font-body: var(--stack-sans); --header-blur: saturate(1.05) blur(12px); color-scheme: dark; } /* ========================================================================= 3. Soft Glam — rosy ========================================================================= */ [data-theme="soft-glam"] { --bg: #fff0f4; --bg-alt: #ffe6ee; --surface: #ffffff; --surface-alt: #fff4f8; --text: #3a2630; --muted: #9c7f8b; --primary: #d96f97; --primary-strong: #c8527f; --primary-soft: #ffe1ec; --primary-contrast: #ffffff; --accent: #f4c4d6; --border: #f6d9e3; --ring: rgba(217, 111, 151, 0.34); --radius: 22px; --radius-sm: 14px; --radius-lg: 32px; --shadow: 0 14px 46px -16px rgba(200, 90, 130, 0.32); --shadow-sm: 0 8px 24px -12px rgba(200, 90, 130, 0.28); --overlay: rgba(58, 38, 48, 0.44); --star: #e8a23c; --success: #5c9a78; --danger: #cf5d6b; --font-display: var(--stack-rounded); --font-body: var(--stack-sans); --header-blur: saturate(1.1) blur(10px); color-scheme: light; }