/* ══════════════════════════════════════════════════════════ Theme Definitions — CSS Custom Properties Toggle via data-theme="default" | data-theme="cartographer" on . RGB channel values (space-separated) for Tailwind opacity modifier compatibility. ══════════════════════════════════════════════════════════ */ /* ── Default (Light) ──────────────────────────────────── */ :root, [data-theme="default"] { /* Primary: Deep Blue (Technical Cartographer) */ --color-primary: 0 101 141; --color-primary-dark: 0 78 107; --color-primary-light: 198 231 255; --color-primary-dim: 130 207 255; --color-primary-container: 0 174 239; /* Secondary: Excel Green */ --color-secondary: 23 108 64; --color-secondary-light: 160 241 185; --color-secondary-container: 160 241 185; /* Tertiary: Butterfly Yellow */ --color-tertiary: 112 93 0; --color-tertiary-dim: 233 196 0; /* Surface Hierarchy (blue-tinted — "No-Grey") */ --color-surface: 243 250 255; --color-surface-dim: 205 220 229; --color-surface-bright: 243 250 255; --color-surface-container-lowest:255 255 255; --color-surface-container-low: 231 246 254; --color-surface-container: 225 240 249; --color-surface-container-high: 219 235 243; --color-surface-container-highest:214 229 237; /* On-Surface */ --color-on-surface: 15 29 35; --color-on-surface-variant: 62 72 80; /* On-Primary */ --color-on-primary: 255 255 255; /* Outline */ --color-outline: 110 120 129; --color-outline-variant: 189 200 209; /* Error */ --color-error: 186 26 26; --color-error-container: 255 218 214; /* ── Fonts ── */ --font-headline: 'Manrope', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* ── Shadows (tinted, not grey) ── */ --shadow-ambient: 0px 12px 32px rgba(0, 101, 141, 0.06); --shadow-ambient-lg: 0px 12px 32px rgba(0, 101, 141, 0.08); --shadow-bento: 0 1px 3px 0 rgba(15, 29, 35, 0.05), 0 1px 2px 0 rgba(15, 29, 35, 0.03), 0 0 0 1px rgba(15, 29, 35, 0.05); /* ── Glass / Utility Bar ── */ --glass-bg: rgba(243, 250, 255, 0.8); --glass-blur: 16px; --utility-bar-bg: rgba(231, 246, 254, 0.85); /* ── CTA Gradient ── */ --cta-gradient: linear-gradient(135deg, #004a68, #00658d); --cta-color: #ffffff; /* ── Selection ── */ --selection-bg: rgba(0, 101, 141, 0.15); /* ── Torus Nav (hex for SVG fill) ── */ --torus-icon-fill: #e8f0ec; --torus-icon-active: #00ffdf; --torus-icon-glow: #00e5cc; --torus-center-label: #5ce0d0; /* ── Sidebar (deep navy-teal pane) ── */ --sidebar-bg: #002d3d; --sidebar-bg-footer: #001e29; --sidebar-text: #f3faff; --sidebar-text-muted: #bdc8d1; --sidebar-section-label: #00AEEF; --sidebar-border-subtle: rgba(255,255,255,0.05); --sidebar-nav-hover-bg: rgba(0, 61, 82, 0.5); --sidebar-nav-active-from: #00658d; --sidebar-nav-active-to: #004a68; --sidebar-nav-active-border: #705d00; --sidebar-nav-active-glow: rgba(0, 174, 239, 0.3); --sidebar-nav-led: #176c40; --sidebar-nav-led-glow: rgba(23, 108, 64, 0.6); /* ── Fillet border colors ── */ --fillet-green: rgb(var(--color-primary)); --fillet-brass: rgb(var(--color-secondary)); --fillet-blue: rgb(var(--color-tertiary)); /* ── Button backgrounds ── */ --btn-primary-bg: rgba(0, 101, 141, 0.08); --btn-primary-color: #00658d; --btn-primary-hover-bg: rgba(0, 101, 141, 0.15); --btn-primary-inset: rgba(0, 101, 141, 0.15); --btn-secondary-bg: rgba(23, 108, 64, 0.08); --btn-secondary-color: #176c40; --btn-secondary-hover-bg: rgba(23, 108, 64, 0.15); /* ── Tonal Break gradient ── */ --tonal-break-from: #00658d; } /* ── Cartographer (Dark) ──────────────────────────────── */ [data-theme="cartographer"] { /* Primary: Mint Green */ --color-primary: 136 216 161; --color-primary-dark: 92 184 122; --color-primary-light: 26 58 39; --color-primary-dim: 92 175 122; --color-primary-container: 0 36 16; /* Secondary: Brass / Gold */ --color-secondary: 227 194 132; --color-secondary-light: 240 217 168; --color-secondary-container: 92 69 19; /* Tertiary: Ice Blue */ --color-tertiary: 137 206 255; --color-tertiary-dim: 93 171 223; /* Surface Hierarchy */ --color-surface: 7 21 27; --color-surface-dim: 12 28 35; --color-surface-bright: 45 59 66; --color-surface-container-lowest:3 16 22; --color-surface-container-low: 12 28 35; --color-surface-container: 19 33 39; --color-surface-container-high: 30 44 50; --color-surface-container-highest:45 59 66; /* On-Surface */ --color-on-surface: 214 229 237; --color-on-surface-variant: 195 199 202; /* On-Primary */ --color-on-primary: 0 36 16; /* Outline */ --color-outline: 138 145 153; --color-outline-variant: 67 71 74; /* Error */ --color-error: 255 180 171; --color-error-container: 147 0 10; /* ── Fonts ── */ --font-headline: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* ── Shadows ── */ --shadow-ambient: 0px 0px 24px 4px rgba(3, 16, 22, 0.4); --shadow-ambient-lg: 0px 0px 32px 6px rgba(3, 16, 22, 0.5); --shadow-bento: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 2px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(67, 71, 74, 0.2); /* ── Glass / Utility Bar ── */ --glass-bg: rgba(45, 59, 66, 0.85); --glass-blur: 12px; --utility-bar-bg: rgba(45, 59, 66, 0.85); /* ── CTA Gradient ── */ --cta-gradient: linear-gradient(135deg, #002410, #003318); --cta-color: #88D8A1; /* ── Selection ── */ --selection-bg: rgba(136, 216, 161, 0.15); /* ── Torus Nav (hex for SVG fill) ── */ --torus-icon-fill: #e8f0ec; --torus-icon-active: #00ffdf; --torus-icon-glow: #00e5cc; --torus-center-label: #5ce0d0; /* ── Sidebar (deep dark pane) ── */ --sidebar-bg: #0b1a20; --sidebar-bg-footer: #06111a; --sidebar-text: #d6e5ed; --sidebar-text-muted: #8a9199; --sidebar-section-label: #88D8A1; --sidebar-border-subtle: rgba(255,255,255,0.05); --sidebar-nav-hover-bg: rgba(30, 44, 50, 0.6); --sidebar-nav-active-from: #003318; --sidebar-nav-active-to: #002410; --sidebar-nav-active-border: #E3C284; --sidebar-nav-active-glow: rgba(136, 216, 161, 0.25); --sidebar-nav-led: #88D8A1; --sidebar-nav-led-glow: rgba(136, 216, 161, 0.6); /* ── Fillet border colors ── */ --fillet-green: rgb(var(--color-primary)); --fillet-brass: rgb(var(--color-secondary)); --fillet-blue: rgb(var(--color-tertiary)); /* ── Button backgrounds ── */ --btn-primary-bg: #002410; --btn-primary-color: #88D8A1; --btn-primary-hover-bg: #003318; --btn-primary-inset: rgba(136, 216, 161, 0.15); --btn-secondary-bg: #5C4513; --btn-secondary-color: #E3C284; --btn-secondary-hover-bg: #6e5218; /* ── Tonal Break gradient ── */ --tonal-break-from: #E3C284; } /* ══════════════════════════════════════════════════════════ Cartographer-Only Decorative Effects ══════════════════════════════════════════════════════════ */ /* ── Grain texture overlay (cartographer only) ────────── */ [data-theme="cartographer"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* ── Brass corner accents (cartographer only) ─────────── */ .brass-corners { position: relative; } [data-theme="cartographer"] .brass-corners::before, [data-theme="cartographer"] .brass-corners::after { content: ''; position: absolute; width: 24px; height: 24px; pointer-events: none; } [data-theme="cartographer"] .brass-corners::before { top: 0; left: 0; border-top: 2px solid rgb(var(--color-secondary)); border-left: 2px solid rgb(var(--color-secondary)); } [data-theme="cartographer"] .brass-corners::after { bottom: 0; right: 0; border-bottom: 2px solid rgb(var(--color-secondary)); border-right: 2px solid rgb(var(--color-secondary)); } /* ── Utility bar grain (cartographer only) ────────────── */ [data-theme="cartographer"] .utility-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }