/* AMS 6-theme token set. Apply by setting data-theme="ocean" | "midnight" | "sunset" | "graphite" | "evergreen" | "orchid" on . Components reference these custom properties only - never a raw hex value. Beyond the AMS base tokens, each theme also defines the viewport tokens the 3D explorer needs (--viewer-bg, --viewer-grid, --highlight, --highlight-soft) so the canvas stays legible in both light and dark themes. */ :root { --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06); --shadow: 0 4px 16px rgb(0 0 0 / 0.10); --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.18); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --max-width: 1180px; } [data-theme="ocean"] { --bg: #f7fafc; --bg-elevated: #ffffff; --bg-sunken: #eef3f8; --fg: #0f1b2a; --fg-muted: #4a5b6d; --accent: #2563eb; --accent-fg: #ffffff; --accent-soft: #dbeafe; --border: #dbe4ee; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --viewer-bg: #0f1b2a; --viewer-grid: #1e3a5f; --highlight: #06b6d4; --highlight-soft: rgb(6 182 212 / 0.18); } [data-theme="midnight"] { --bg: #0b0f19; --bg-elevated: #131a29; --bg-sunken: #070a12; --fg: #e6e9f0; --fg-muted: #9aa4b6; --accent: #6366f1; --accent-fg: #ffffff; --accent-soft: #1e2140; --border: #232b3d; --success: #22c55e; --warning: #f59e0b; --danger: #f87171; --viewer-bg: #070a12; --viewer-grid: #1c2438; --highlight: #06b6d4; --highlight-soft: rgb(6 182 212 / 0.22); } [data-theme="sunset"] { --bg: #fff8f2; --bg-elevated: #ffffff; --bg-sunken: #fdeee1; --fg: #2a1810; --fg-muted: #7a5a48; --accent: #ea580c; --accent-fg: #ffffff; --accent-soft: #ffe6d5; --border: #f2ddca; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --viewer-bg: #2a1810; --viewer-grid: #4a2e1e; --highlight: #fb923c; --highlight-soft: rgb(251 146 60 / 0.20); } [data-theme="graphite"] { --bg: #161718; --bg-elevated: #202224; --bg-sunken: #101112; --fg: #e9eaeb; --fg-muted: #9b9fa5; --accent: #64748b; --accent-fg: #ffffff; --accent-soft: #2a2d31; --border: #2c2e31; --success: #22c55e; --warning: #eab308; --danger: #ef4444; --viewer-bg: #101112; --viewer-grid: #26292d; --highlight: #38bdf8; --highlight-soft: rgb(56 189 248 / 0.20); } [data-theme="evergreen"] { --bg: #f5faf6; --bg-elevated: #ffffff; --bg-sunken: #e8f3ec; --fg: #10241a; --fg-muted: #4c6357; --accent: #15803d; --accent-fg: #ffffff; --accent-soft: #d6f0df; --border: #d6e8dc; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --viewer-bg: #10241a; --viewer-grid: #1d3d2c; --highlight: #34d399; --highlight-soft: rgb(52 211 153 / 0.20); } [data-theme="orchid"] { --bg: #fbf7fc; --bg-elevated: #ffffff; --bg-sunken: #f4e9f6; --fg: #241827; --fg-muted: #6b5470; --accent: #a21caf; --accent-fg: #ffffff; --accent-soft: #f6e0f9; --border: #ecdcef; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --viewer-bg: #241827; --viewer-grid: #3d2a42; --highlight: #e879f9; --highlight-soft: rgb(232 121 249 / 0.20); }