/* Dark theme — the default. */ :root { /* --- Brand --- */ --ct-primary: #111113; --ct-primary-light: #1e1e22; --ct-accent: #dc2626; --ct-accent-dark: #991b1b; --ct-accent-glow: rgba(220, 38, 38, 0.35); --ct-success: #22c55e; --ct-warning: #f59e0b; --ct-danger: #ef4444; /* --- Surfaces --- */ --ct-bg: #1c1917; --ct-surface: #292524; --ct-surface-raised: #322e2b; --ct-border: #44403c; --ct-text: #e7e5e4; --ct-text-muted: #a8a29e; /* --- Shape & shadow --- */ --ct-radius: 0.75rem; --ct-radius-sm: 0.5rem; --ct-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --ct-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5); /* --- Type --- */ --ct-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Light theme — overrides applied when . */ [data-theme="light"] { --ct-accent: #b91c1c; /* deeper crimson reads better on light */ --ct-accent-dark: #7f1d1d; --ct-accent-glow: rgba(185, 28, 28, 0.25); --ct-success: #16a34a; --ct-warning: #f59e0b; --ct-danger: #dc2626; --ct-bg: #e7e5e4; /* the warm gray you picked earlier */ --ct-surface: #ffffff; --ct-surface-raised: #f5f5f4; --ct-border: #d6d3d1; --ct-text: #1c1917; --ct-text-muted: #78716c; --ct-shadow: 0 4px 16px rgba(17, 17, 19, 0.08); --ct-shadow-hover: 0 8px 24px rgba(17, 17, 19, 0.14); }