/* ========================================================================== CODEFORGE — THEMES -------------------------------------------------------------------------- Overrides semantic tokens defined in tokens.css for light mode. Dark mode = default (defined in tokens.css). Light mode = activated via [data-theme="light"] on . Depends on: css/tokens.css ========================================================================== */ /* ====================================================================== 1. NATIVE COLOR-SCHEME HINT Tells the browser to render native UI (scrollbars, form controls, date pickers) in the correct light/dark variant. ====================================================================== */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* ====================================================================== 2. LIGHT THEME Overrides all semantic surface, text, and border tokens. Raw palette (--gray-*, --color-brand-*, etc.) is NOT redefined — only the semantic mappings change. ====================================================================== */ html[data-theme="light"] { /* ----------------------- Backgrounds ----------------------- */ --bg-app: var(--gray-25); --bg-surface: var(--gray-0); --bg-surface-raised: var(--gray-0); --bg-surface-sunken: var(--gray-50); --bg-header: var(--gray-0); --bg-sidebar: var(--gray-25); --bg-footer: var(--gray-50); --bg-input: var(--gray-0); --bg-code: var(--gray-25); --bg-hover: rgba(0, 0, 0, 0.04); --bg-active: rgba(0, 0, 0, 0.08); --bg-selection: rgba(255, 122, 69, 0.20); --bg-overlay: rgba(15, 17, 20, 0.45); /* ----------------------- Text ----------------------- */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-tertiary: var(--gray-500); --text-disabled: var(--gray-300); --text-inverse: var(--gray-0); --text-brand: var(--color-brand-600); --text-link: var(--color-brand-700); --text-code: var(--gray-900); /* ----------------------- Borders ----------------------- */ --border-subtle: var(--gray-100); --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-focus: var(--color-brand-600); --border-danger: var(--color-danger-600); --border-success: var(--color-success-600); /* ----------------------- Interactive accents ----------------------- */ --accent-primary: var(--color-brand-600); --accent-primary-hover: var(--color-brand-500); --accent-primary-active: var(--color-brand-700); --accent-on-primary: var(--gray-0); /* ----------------------- Shadows — softer in light mode ----------------------- */ --shadow-xs: 0 1px 2px rgba(15, 17, 20, 0.06); --shadow-sm: 0 2px 4px rgba(15, 17, 20, 0.08); --shadow-md: 0 4px 12px rgba(15, 17, 20, 0.10); --shadow-lg: 0 10px 30px rgba(15, 17, 20, 0.12); --shadow-xl: 0 20px 60px rgba(15, 17, 20, 0.16); --shadow-focus: 0 0 0 3px rgba(255, 122, 69, 0.30); --shadow-inset: inset 0 1px 2px rgba(15, 17, 20, 0.06); /* ----------------------- Scrollbars ----------------------- */ --scrollbar-thumb: var(--gray-300); --scrollbar-thumb-hover: var(--gray-400); /* ----------------------- Focus ring ----------------------- */ --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--color-brand-600); /* ----------------------- Status colors — tuned for contrast on light surfaces ----------------------- */ --color-success-500: #1f9d70; --color-warning-500: #c48a1e; --color-danger-500: #d64444; --color-info-500: #1f6fd0; /* ----------------------- Production-state colors — re-mapped after status color shift ----------------------- */ --state-idle: var(--gray-500); --state-discovery: var(--color-info-500); --state-analyzing: var(--color-info-500); --state-planning: var(--color-info-500); --state-batch-ready: var(--color-brand-600); --state-awaiting-user: var(--color-brand-600); --state-generating: var(--color-warning-500); --state-reviewing: var(--color-warning-500); --state-repairing: var(--color-warning-600); --state-ready-for-delivery: var(--color-success-500); --state-user-testing: var(--color-success-500); --state-debugging: var(--color-danger-500); --state-checkpoint: var(--color-success-600); --state-handoff: var(--color-info-600); --state-completed: var(--color-success-600); /* ----------------------- Code syntax — light-mode palette ----------------------- */ --syntax-fg: var(--gray-900); --syntax-comment: var(--gray-400); --syntax-keyword: #7c3aed; --syntax-string: #1f7a3a; --syntax-number: #b0410e; --syntax-function: #1f5fb0; --syntax-tag: #c2410c; --syntax-attr: #a16207; --syntax-punct: var(--gray-600); } /* ====================================================================== 3. RESPECT OS PREFERENCE Only applies when NO explicit data-theme attribute is set. index.html sets data-theme="dark" by default, so this block acts as a safety net if that attribute is ever removed dynamically. ====================================================================== */ @media (prefers-color-scheme: light) { html:not([data-theme]) { color-scheme: light; --bg-app: var(--gray-25); --bg-surface: var(--gray-0); --bg-surface-raised: var(--gray-0); --bg-surface-sunken: var(--gray-50); --bg-header: var(--gray-0); --bg-sidebar: var(--gray-25); --bg-footer: var(--gray-50); --bg-input: var(--gray-0); --bg-code: var(--gray-25); --bg-hover: rgba(0, 0, 0, 0.04); --bg-active: rgba(0, 0, 0, 0.08); --bg-selection: rgba(255, 122, 69, 0.20); --bg-overlay: rgba(15, 17, 20, 0.45); --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-tertiary: var(--gray-500); --text-disabled: var(--gray-300); --text-inverse: var(--gray-0); --text-brand: var(--color-brand-600); --text-link: var(--color-brand-700); --text-code: var(--gray-900); --border-subtle: var(--gray-100); --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-focus: var(--color-brand-600); --accent-primary: var(--color-brand-600); --accent-primary-hover: var(--color-brand-500); --accent-primary-active: var(--color-brand-700); --accent-on-primary: var(--gray-0); --scrollbar-thumb: var(--gray-300); --scrollbar-thumb-hover: var(--gray-400); } } /* ====================================================================== 4. THEME TRANSITION Enabled briefly by theme.js when the user toggles themes. Kept out of the default state to avoid animating on initial load (which would cause a visible color-shift flash). ====================================================================== */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), fill var(--dur-normal) var(--ease-out), stroke var(--dur-normal) var(--ease-out) !important; } /* Never animate theme transition for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: none !important; } } /* ====================================================================== 5. THEME-SPECIFIC ADJUSTMENTS Small, targeted adjustments that can't be handled by token overrides. ====================================================================== */ /* Light-mode boot screen (in case theme is set before boot fully hides) */ html[data-theme="light"] body { background: var(--bg-app); color: var(--text-primary); } html[data-theme="light"] #boot-screen { background: var(--bg-app); } html[data-theme="light"] #boot-logo { color: var(--text-primary); } html[data-theme="light"] #boot-status { color: var(--text-tertiary); } html[data-theme="light"] #boot-spinner { border-color: var(--gray-100); border-top-color: var(--color-brand-600); } /* ====================================================================== 6. PRINT Force a clean light theme for printing (documentation export, etc.) ====================================================================== */ @media print { html, html[data-theme="dark"], html[data-theme="light"] { color-scheme: light; --bg-app: #ffffff; --bg-surface: #ffffff; --bg-surface-raised: #ffffff; --bg-surface-sunken: #f5f5f5; --bg-code: #f5f5f5; --text-primary: #000000; --text-secondary: #333333; --text-tertiary: #555555; --border-subtle: #dddddd; --border-default: #cccccc; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; } #app-header, #app-footer, #app-sidebar, #command-bar, .modal-root, .toast-root { display: none !important; } }