/* styles/theme.css */ /* ----------------------------- Design Tokens (Light default) ------------------------------ */ :root { /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Font sizes (scale) */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-24: 24px; --fs-40: 40px; --fs-56: 56px; /* Line heights */ --lh-tight: 1.1; --lh-normal: 1.4; /* Spacing scale */ --s-0: 0px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Radius */ --r-12: 12px; --r-16: 16px; --r-24: 24px; /* Colors (semantic) */ --bg: #0b1020; --fg: #e8eefc; --muted: #a7b3d6; /* Surfaces */ --surface-1: rgba(255, 255, 255, 0.06); --border-1: rgba(255, 255, 255, 0.12); /* Shadows (subtle; works with glass) */ --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.25); /* Glass */ --glass-blur: 10px; /* Accent gradient blobs */ --blob-1: rgba(99, 102, 241, 0.35); /* indigo */ --blob-2: rgba(34, 197, 94, 0.18); /* green */ } /* ----------------------------- Dark/Light support - Use prefers-color-scheme - Allow manual override via data-theme ------------------------------ */ @media (prefers-color-scheme: light) { :root { --bg: #f7f8ff; --fg: #0b1020; --muted: #44507a; --surface-1: rgba(0, 0, 0, 0.04); --border-1: rgba(0, 0, 0, 0.10); --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.12); --blob-1: rgba(99, 102, 241, 0.22); --blob-2: rgba(34, 197, 94, 0.12); } } /* Manual override (optional): or */ html[data-theme="dark"] { --bg: #0b1020; --fg: #e8eefc; --muted: #a7b3d6; --surface-1: rgba(255, 255, 255, 0.06); --border-1: rgba(255, 255, 255, 0.12); --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.25); --blob-1: rgba(99, 102, 241, 0.35); --blob-2: rgba(34, 197, 94, 0.18); } html[data-theme="light"] { --bg: #f7f8ff; --fg: #0b1020; --muted: #44507a; --surface-1: rgba(0, 0, 0, 0.04); --border-1: rgba(0, 0, 0, 0.10); --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.12); --blob-1: rgba(99, 102, 241, 0.22); --blob-2: rgba(34, 197, 94, 0.12); }