:root { /* Color Palette — Forge Dark-First (Operator Bench) */ --bg-dark: #0a0a0a; /* True black canvas */ --bg-panel: #111111; /* Dark panel / card surface */ --bg-panel-hover: #1a1a1a; /* Subtle lift on hover */ --glass-bg: rgba(17, 17, 17, 0.95); --text-main: #d4d4d4; /* Primary text — easy on the eyes */ --text-muted: #737373; /* Secondary / labels */ --text-faint: #404040; /* Hints, placeholders */ /* Forge Accent Colors */ --accent-red: #22d3ee; /* Primary accent — cyan (replaces Canadian red) */ --accent-darkred: #0e7490; /* Deeper cyan for active/hover states */ --accent-blue: #0ea5e9; /* Secondary accent — sky blue */ --accent-purple: #a78bfa; /* Wizard step indicators, loading spinners */ --accent-green: #4ade80; /* Success states, compatible badges */ --accent-cyan: #22d3ee; /* Info highlights — same as primary in dark-first */ --negative-red: #f87171; /* Error states, destructive actions */ --border-color: rgba(255, 255, 255, 0.08); /* Faint white border on dark */ --border-hover: rgba(255, 255, 255, 0.15); /* Stark Elevation Shadows */ --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4); --card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.5); --inset-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7); --glow-shadow: 0 0 20px rgba(34, 211, 238, 0.2); /* Cyan glow */ /* Layout */ --sidebar-width: 330px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; /* Typography — Operator Mono + Serif */ --font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --font-serif: 'Source Serif 4', 'Georgia', serif; /* Theme transition speed */ --theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* --------------------------------------------------------------- Light Mode — applied by adding [data-theme="light"] to (Forge is dark-first; light mode is the override) --------------------------------------------------------------- */ [data-theme="light"] { --bg-dark: #f0f2f5; --bg-panel: #ffffff; --bg-panel-hover: #f1f5f9; --glass-bg: rgba(255, 255, 255, 0.90); --text-main: #0f172a; --text-muted: #475569; --text-faint: #94a3b8; --accent-red: #0e7490; --accent-darkred: #0c4a6e; --accent-blue: #0284c7; --accent-purple: #7c3aed; --accent-green: #16a34a; --accent-cyan: #0891b2; --negative-red: #dc2626; --border-color: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.15); --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --inset-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); --glow-shadow: 0 0 15px rgba(14, 116, 144, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family); background-color: var(--bg-dark); color: var(--text-main); line-height: 1.5; overflow: hidden; /* App container handles scroll */ transition: var(--theme-transition); } /* DEBT-004: Theme transitions scoped to layout elements only (not every DOM node) */ body, .app-header, .sidebar, .main-content, .card, .modal, .build-drawer, .component-card, .plat-card, input, select, textarea, button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Utilities */ .hidden { display: none !important; } /* POLISH-009: Screen reader only — visually hidden, accessible to assistive tech */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* POLISH-017: Print media styles */ @media print { body { background: #fff !important; color: #000 !important; } .sidebar, .topbar, .build-fab, .build-drawer, .build-drawer-overlay, .dark-mode-toggle, .modal-overlay, .toast-container, nav, .wizard-banner, .drawer-footer .build-actions, button:not(.no-print-hide) { display: none !important; } .main-content { margin: 0 !important; padding: 16px !important; } .app-container { display: block !important; } .card, .glass-panel, .guide-table { break-inside: avoid; } a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; } .components-grid { grid-template-columns: repeat(2, 1fr) !important; } * { box-shadow: none !important; text-shadow: none !important; } }