/* * ================================================================= * theme.css — Gear Generator Design System * ================================================================= * * Load order (index.html ): * 1. ← this file * 2. ← layout / components * * What lives here * ─────────────── * • Google Fonts import (Inter, JetBrains Mono) * • CSS custom properties (:root) — all color / sizing tokens * • Font-role utility classes — enforce typography rules * • Global reset (margin/padding/box-sizing) * * What does NOT live here * ──────────────────────── * • Any layout (grid, flex, position, width, height) * • Component structure (sidebar, canvas-area, buttons…) * • Responsive breakpoints * • Animations / keyframes * * To retheme the entire app: edit :root only. * To change fonts: edit the @import + font-role classes only. * ================================================================= */ /* ================================================================= §1 FONTS ----------------------------------------------------------------- Inter → UI chrome: body, labels, buttons, section titles JetBrains Mono → numeric inputs, coord readouts, status data ONLY ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ================================================================= §2 DESIGN TOKENS ================================================================= */ :root { /* ── Backgrounds ─────────────────────────────────────────── */ --bg: #121212; /* main app background */ --bg-panel: #1C1C1E; /* sidebar, header */ --bg-panel-alt: #252527; /* inputs, secondary panels */ --bg-selected: #1A1A30; /* selected list item */ /* ── Borders ─────────────────────────────────────────────── */ --border: #2C2C2E; /* default borders */ --border-subtle: #232325; /* hairline dividers */ --border-focus: #6366F1; /* focused input outline */ --border-selected:#4F46E5; /* selected item border */ /* ── Canvas background grid ──────────────────────────────── */ --gridline: #2A2F36; /* ── Typography ─────────────────────────────────────────── */ --text: #F2F2F2; /* primary text */ --text-dim: #8A8A8E; /* labels, secondary */ --text-muted: #48484A; /* disabled, placeholder */ --text-accent: #818CF8; /* accented values (stats) */ /* ── Accent ──────────────────────────────────────────────── */ --accent: #4F46E5; --accent-hover: #6366F1; --accent-glow: rgba(79,70,229,0.28); /* ── Buttons — OUTLINED ONLY ─────────────────────────────── */ /* primary (indigo) */ --btn-border: #4F46E5; --btn-text: #818CF8; --btn-hover-bg: rgba(79,70,229,0.10); --btn-active-bg: rgba(79,70,229,0.18); /* danger (red) */ --btn-danger-border: #EF4444; --btn-danger-text: #F87171; --btn-danger-hover: rgba(239,68,68,0.10); --btn-danger-active: rgba(239,68,68,0.18); /* neutral (zinc) */ --btn-neutral-border: #52525B; --btn-neutral-text: #A1A1AA; --btn-neutral-hover: rgba(255,255,255,0.05); --btn-neutral-active: rgba(255,255,255,0.09); /* success (emerald) */ --btn-success-border: #059669; --btn-success-text: #34D399; --btn-success-hover: rgba(5,150,105,0.10); --btn-success-active: rgba(5,150,105,0.18); /* ── Gear palette CSS vars ─────────────────────────────────── Used only by sidebar color-dot swatches. Actual canvas rendering colors live in theme.js (Canvas 2D needs JS strings). Index must match window.THEME.GEAR_COLORS[i].hex ─────────────────────────────────────────────────────────── */ --gear-0: #3B82F6; /* Steel Blue */ --gear-1: #14B8A6; /* Industrial Teal */ --gear-2: #F97316; /* Burnt Orange */ --gear-3: #4F7FEA; /* Deep Cobalt (lightened stroke) */ --gear-4: #10B981; /* Machine Green (lightened) */ --gear-5: #EA580C; /* Copper Alloy (lightened) */ --gear-6: #8B5CF6; /* Industrial Violet (lightened) */ --gear-7: #6B7280; /* Graphite (lightened) */ --gear-8: #7C8FA6; /* Cool Steel (lightened) */ /* ── Sizing ──────────────────────────────────────────────── */ --tap: 44px; /* WCAG minimum touch target */ --radius: 6px; --radius-sm: 4px; --sidebar-w: 310px; } /* ================================================================= §3 FONT-ROLE UTILITIES ----------------------------------------------------------------- Applied to HTML elements in index.html