@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* DroneClear Global Color System — unified with ecosystem */ --bg-dark: #0c0c0a; --bg-panel: #1c1c17; --bg-panel-hover: #242420; --glass-bg: rgba(18, 19, 30, 0.95); --surface-primary:#141410; --surface-secondary:#1c1c17; --text-main: #f5f0e8; --text-muted: #8a8070; --text-faint: #6b6358; --text-primary:#f5f0e8; --text-secondary:#b8b0a0; /* Forge accent colors */ --accent-red: #ff3b5c; --accent-darkred: #cc2244; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #22c55e; --accent-cyan: #00d4ff; --accent-amber: #f59e0b; --negative-red: #ef4444; /* Semantic tokens */ --red: #ef4444; --green: #22c55e; --mustard: #f59e0b; --white: #f5f0e8; --border-color: #2e2e26; --border-hover: #3e3e34; /* Shadows */ --card-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5); --card-shadow-hover: 0 10px 24px rgba(0,0,0,0.9), 0 4px 8px rgba(0,0,0,0.6); --inset-shadow: inset 0 2px 4px rgba(0,0,0,0.7); --glow-shadow: 0 0 20px rgba(201,162,39,0.2); /* Layout */ --sidebar-width: 330px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; /* Typography */ --font-family: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-serif: 'Source Serif 4', Georgia, serif; --theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* --------------------------------------------------------------- Light Mode — applied by adding [data-theme="light"] to (Forge is dark-first; light mode is the override) --------------------------------------------------------------- */ /* light theme disabled — dark-first design */ * { 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; } }