/* ============================================================ Robot Heart โ€” Internal Ops ยท THEME SYSTEM Drop-in: in . Switch by setting data-theme on : midnight | brandeaux | paper | playa | console Components are untouched โ€” a utility "bridge" (bottom of file) remaps the existing Tailwind color utilities to theme tokens. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Archivo:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ---- Status / concept tones (one hue each; chips recolor by theme) ---- */ :root { --tone-lead:#7e8aa2; --tone-intalks:#d59a2b; --tone-verbal:#1aa3b0; --tone-confirmed:#1f9f5b; --tone-declined:#d94a63; --tone-past:#8a6fd6; --tone-new:#c54a86; --tone-violet:#8a6fd6; --tone-cyan:#1aa3b0; --tone-amber:#d59a2b; --tone-emerald:#1f9f5b; --tone-rose:#d94a63; --tone-sky:#3b86d4; --tone-pink:#c54a86; --tone-slate:#7e8aa2; --tone-fuchsia:#c54a86; --tone-red:#d94a63; --tone-teal:#1aa3b0; /* chip recolor strategy (overridden in light themes) */ --chip-bg-base: transparent; --chip-bg-amt: 20%; --chip-text-base: #ffffff; --chip-text-amt: 80%; --chip-border-amt: 34%; } /* ============================ MIDNIGHT (default) ============================ */ :root, [data-theme="midnight"] { color-scheme: dark; --font-ui:'Hanken Grotesk',system-ui,sans-serif; --font-display:'Hanken Grotesk',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --display-weight:700; --display-transform:none; --bg:#0a0a0e; --bg-image: radial-gradient(1100px 540px at 18% -12%, rgba(138,111,214,0.14), transparent 60%), radial-gradient(820px 460px at 102% 108%, rgba(26,163,176,0.10), transparent 55%); --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.055); --surface-hover: rgba(255,255,255,0.09); --menu-bg: #1c1b22; --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.18); --text:#ececf1; --text-dim:#a2a2b0; --text-mute:#6a6a78; --accent:#8b5cf6; --accent-2:#ec4899; --accent-soft:rgba(139,92,246,0.16); --accent-text:#ffffff; --accent-ring:rgba(139,92,246,0.35); --btn-primary-bg: linear-gradient(135deg,#8b5cf6,#ec4899); --field-bg: rgba(0,0,0,0.34); --panel-blur: 8px; --lineup-time-bg: rgba(8,8,12,0.72); --lineup-time-border: rgba(255,255,255,0.08); --lineup-time-text: #b6b6c4; --lineup-time-text-strong: #ececf1; --lineup-time-label: #737383; --lineup-time-sep: rgba(255,255,255,0.18); } /* ============================ BRANDEAUX (warm cream, light) ============================ */ [data-theme="brandeaux"] { color-scheme: light; --font-ui:'Hanken Grotesk',system-ui,sans-serif; --font-display:'Spectral',Georgia,serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --display-weight:500; --display-transform:none; --bg:#efe7d6; --bg-image: radial-gradient(1100px 560px at 80% -10%, rgba(195,185,150,0.45), transparent 60%); --surface:#fbf7ec; --surface-2:#f3ecdc; --surface-hover:#f6efe0; --menu-bg: var(--surface); --border:#ddd0b5; --border-strong:#c9b894; --text:#2a2419; --text-dim:#6f6754; --text-mute:#9a9080; --accent:#1f1a12; --accent-2:#b8a878; --accent-soft:rgba(184,168,120,0.26); --accent-text:#f4efe3; --accent-ring:rgba(184,168,120,0.5); --btn-primary-bg:#1f1a12; --field-bg:#fffdf6; --panel-blur: 0px; --lineup-time-bg: #e9dfca; --lineup-time-border: #d7c8aa; --lineup-time-text: #7f735d; --lineup-time-text-strong: #4a3e2a; --lineup-time-label: #aa9c81; --lineup-time-sep: #d1c1a3; --chip-bg-base:#fbf7ec; --chip-bg-amt:20%; --chip-text-base:#211b10; --chip-text-amt:64%; --chip-border-amt:42%; } /* ============================ PAPER (high-contrast print, light) ============================ */ [data-theme="paper"] { color-scheme: light; --font-ui:'Hanken Grotesk',system-ui,sans-serif; --font-display:'Hanken Grotesk',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --display-weight:800; --display-transform:none; --bg:#f6f6f3; --bg-image:none; --surface:#ffffff; --surface-2:#f3f3ef; --surface-hover:#eeeeea; --menu-bg: var(--surface); --border:#e3e3dd; --border-strong:#15151a; --text:#15151a; --text-dim:#585862; --text-mute:#8e8e98; --accent:#d8492a; --accent-2:#15151a; --accent-soft:rgba(216,73,42,0.12); --accent-text:#ffffff; --accent-ring:rgba(216,73,42,0.3); --btn-primary-bg:#15151a; --field-bg:#ffffff; --panel-blur: 0px; --lineup-time-bg: #f0f0eb; --lineup-time-border: #deded7; --lineup-time-text: #686873; --lineup-time-text-strong: #202027; --lineup-time-label: #a2a2aa; --lineup-time-sep: #d7d7d0; --chip-bg-base:#ffffff; --chip-bg-amt:15%; --chip-text-base:#000000; --chip-text-amt:60%; --chip-border-amt:40%; } /* ============================ PLAYA (desert dusk, dark) ============================ */ [data-theme="playa"] { color-scheme: dark; --font-ui:'Hanken Grotesk',system-ui,sans-serif; --font-display:'Archivo',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --display-weight:800; --display-transform:none; --bg:#1c1410; --bg-image: radial-gradient(1200px 620px at 50% -16%, rgba(232,132,60,0.30), transparent 58%), radial-gradient(900px 520px at 90% 110%, rgba(217,107,107,0.18), transparent 55%); --surface: rgba(255,238,214,0.055); --surface-2: rgba(255,238,214,0.08); --surface-hover: rgba(255,238,214,0.12); --menu-bg: #2c2119; --border: rgba(255,224,190,0.14); --border-strong: rgba(255,224,190,0.30); --text:#f3e8d8; --text-dim:#c4b09a; --text-mute:#8c7a68; --accent:#e8843c; --accent-2:#d96b6b; --accent-soft:rgba(232,132,60,0.18); --accent-text:#1c1410; --accent-ring:rgba(232,132,60,0.4); --btn-primary-bg: linear-gradient(135deg,#e8843c,#d96b6b); --field-bg: rgba(0,0,0,0.26); --panel-blur: 7px; --lineup-time-bg: rgba(25,18,14,0.78); --lineup-time-border: rgba(255,224,190,0.13); --lineup-time-text: #d9c8b5; --lineup-time-text-strong: #f3e8d8; --lineup-time-label: #9f8b75; --lineup-time-sep: rgba(255,224,190,0.24); } /* ============================ CONSOLE (ops terminal, mono, dark) ============================ */ [data-theme="console"] { color-scheme: dark; --font-ui:'JetBrains Mono',ui-monospace,monospace; --font-display:'JetBrains Mono',ui-monospace,monospace; --font-mono:'JetBrains Mono',ui-monospace,monospace; --display-weight:700; --display-transform:uppercase; --bg:#070a0b; --bg-image:none; --surface:#0e1214; --surface-2:#131a1c; --surface-hover:#182022; --menu-bg: var(--surface); --border:#1f2a2c; --border-strong:#36d39955; --text:#cdd8d2; --text-dim:#7c8b85; --text-mute:#4d5a55; --accent:#36d399; --accent-2:#e0a83c; --accent-soft:rgba(54,211,153,0.12); --accent-text:#051210; --accent-ring:rgba(54,211,153,0.3); --btn-primary-bg:#36d399; --field-bg:#0a0f10; --panel-blur: 0px; --lineup-time-bg: #05090a; --lineup-time-border: #152123; --lineup-time-text: #8fa09a; --lineup-time-text-strong: #cdd8d2; --lineup-time-label: #53615c; --lineup-time-sep: #263234; --chip-bg-amt:16%; --chip-text-amt:88%; } /* ============================================================ GLOBAL โ€” apply fonts & display treatment ============================================================ */ body { font-family: var(--font-ui) !important; } h1, h2, h3 { font-family: var(--font-display); } [data-theme="console"] h1, [data-theme="console"] h2, [data-theme="console"] h3 { text-transform: uppercase; letter-spacing: -0.01em; } .label { font-family: var(--font-mono); } /* ============================================================ TAILWIND UTILITY BRIDGE Remaps the hardcoded utilities used across the app to theme tokens, so the whole UI reskins without touching the JSX. Substring [class*=] matching tolerates Tailwind's escaping. ============================================================ */ /* --- neutral TEXT --- */ [class*="text-white"] { color: var(--text) !important; } [class*="text-white/70"], [class*="text-white/60"], [class*="text-white/50"] { color: var(--text-dim) !important; } [class*="text-white/40"], [class*="text-white/30"], [class*="text-white/20"] { color: var(--text-mute) !important; } [class*="hover:text-white"]:hover { color: var(--text) !important; } /* --- neutral BACKGROUNDS (guard against hover-only variants) --- */ [class*="bg-white/5"]:not([class*="hover:bg-white/5"]), [class*="bg-white/[0.03]"], [class*="bg-white/[0.04]"] { background-color: var(--surface-2) !important; } [class*="bg-white/[0.06]"]:not([class*="hover:bg-white/[0.06]"]), [class*="bg-white/10"]:not([class*="hover:bg-white/10"]) { background-color: var(--surface-hover) !important; } [class*="hover:bg-white"]:hover { background-color: var(--surface-hover) !important; } /* --- black overlays (header / menus / fields / gallery chip) --- */ [class*="bg-black/90"] { background-color: var(--menu-bg) !important; } [class*="bg-black/50"] { background-color: color-mix(in srgb, var(--surface) 78%, transparent) !important; } [class*="bg-black/40"], [class*="bg-black/30"] { background-color: color-mix(in srgb, var(--bg) 55%, transparent) !important; } /* --- neutral BORDERS --- */ [class*="border-white"] { border-color: var(--border) !important; } [class*="border-white/20"] { border-color: var(--border-strong) !important; } /* --- accent gradient bars (dropped-in-by) --- */ [class*="bg-gradient-to-r"][class*="from-violet-500"] { background-image: linear-gradient(to right, var(--accent), var(--accent-2)) !important; } [class*="ring-violet-400"] { --tw-ring-color: var(--accent-ring) !important; } /* --- named hue chips (status / logistics / concepts / NEW) --- */ [class*="bg-violet-500/"] { background-color: color-mix(in srgb, var(--tone-violet) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-fuchsia-500/"] { background-color: color-mix(in srgb, var(--tone-fuchsia) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-cyan-500/"] { background-color: color-mix(in srgb, var(--tone-cyan) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-amber-500/"] { background-color: color-mix(in srgb, var(--tone-amber) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-emerald-500/"] { background-color: color-mix(in srgb, var(--tone-emerald) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-rose-500/"] { background-color: color-mix(in srgb, var(--tone-rose) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-red-500/"] { background-color: color-mix(in srgb, var(--tone-red) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-sky-500/"] { background-color: color-mix(in srgb, var(--tone-sky) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-pink-500/"] { background-color: color-mix(in srgb, var(--tone-pink) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-slate-500/"] { background-color: color-mix(in srgb, var(--tone-slate) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="bg-teal-500/"] { background-color: color-mix(in srgb, var(--tone-teal) var(--chip-bg-amt), var(--chip-bg-base)) !important; } [class*="text-violet-2"],[class*="text-violet-3"] { color: color-mix(in srgb, var(--tone-violet) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-fuchsia-2"],[class*="text-fuchsia-3"] { color: color-mix(in srgb, var(--tone-fuchsia) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-cyan-2"],[class*="text-cyan-3"] { color: color-mix(in srgb, var(--tone-cyan) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-amber-2"],[class*="text-amber-3"] { color: color-mix(in srgb, var(--tone-amber) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-emerald-2"],[class*="text-emerald-3"] { color: color-mix(in srgb, var(--tone-emerald) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-rose-2"],[class*="text-rose-3"] { color: color-mix(in srgb, var(--tone-rose) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-red-2"],[class*="text-red-3"] { color: color-mix(in srgb, var(--tone-red) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-sky-2"],[class*="text-sky-3"] { color: color-mix(in srgb, var(--tone-sky) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-pink-2"],[class*="text-pink-3"] { color: color-mix(in srgb, var(--tone-pink) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-slate-2"],[class*="text-slate-3"] { color: color-mix(in srgb, var(--tone-slate) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="text-teal-2"],[class*="text-teal-3"] { color: color-mix(in srgb, var(--tone-teal) var(--chip-text-amt), var(--chip-text-base)) !important; } [class*="border-violet-3"],[class*="border-violet-4"] { border-color: color-mix(in srgb, var(--tone-violet) var(--chip-border-amt), transparent) !important; } [class*="border-fuchsia-3"],[class*="border-fuchsia-4"] { border-color: color-mix(in srgb, var(--tone-fuchsia) var(--chip-border-amt), transparent) !important; } [class*="border-cyan-3"],[class*="border-cyan-4"] { border-color: color-mix(in srgb, var(--tone-cyan) var(--chip-border-amt), transparent) !important; } [class*="border-amber-3"],[class*="border-amber-4"] { border-color: color-mix(in srgb, var(--tone-amber) var(--chip-border-amt), transparent) !important; } [class*="border-emerald-3"],[class*="border-emerald-4"] { border-color: color-mix(in srgb, var(--tone-emerald) var(--chip-border-amt), transparent) !important; } [class*="border-rose-3"],[class*="border-rose-4"] { border-color: color-mix(in srgb, var(--tone-rose) var(--chip-border-amt), transparent) !important; } [class*="border-red-3"],[class*="border-red-4"] { border-color: color-mix(in srgb, var(--tone-red) var(--chip-border-amt), transparent) !important; } [class*="border-sky-3"],[class*="border-sky-4"] { border-color: color-mix(in srgb, var(--tone-sky) var(--chip-border-amt), transparent) !important; } [class*="border-pink-3"],[class*="border-pink-4"] { border-color: color-mix(in srgb, var(--tone-pink) var(--chip-border-amt), transparent) !important; } [class*="border-slate-3"],[class*="border-slate-4"] { border-color: color-mix(in srgb, var(--tone-slate) var(--chip-border-amt), transparent) !important; } [class*="border-teal-3"],[class*="border-teal-4"] { border-color: color-mix(in srgb, var(--tone-teal) var(--chip-border-amt), transparent) !important; } /* ============================================================ THEME PICKER (vanilla, lives in the account bar) ============================================================ */ .theme-menu { position: relative; } .theme-pop { position: absolute; right: 0; bottom: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 8px; width: 220px; box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7); backdrop-filter: blur(12px); } .theme-pop[hidden] { display: none; } .theme-pop .tp-label { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-mute); padding: 4px 8px; } .theme-pop button.tp-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: 8px; padding: 8px 9px; font: 600 13px var(--font-ui); cursor: pointer; } .theme-pop button.tp-opt:hover { background: var(--surface-hover); } .theme-pop button.tp-opt[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent-ring); } .tp-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border-strong); flex-shrink: 0; } .tp-sub { font: 400 10px var(--font-mono); color: var(--text-mute); margin-left: auto; } /* ============================================================ GLOBAL SCROLLBAR HIDING (Native App Feel) ============================================================ */ ::-webkit-scrollbar { display: none; } * { scrollbar-width: none; -ms-overflow-style: none; }