/* ============================================================================= * Maplable Design Tokens * Source of truth for the brand visual language. * Mirrors the in-app HUD aesthetic ("intelligence operator" feel). * Ports directly to Tailwind config / Astro / React projects. * ============================================================================= */ :root { /* --- Palette: Deep Space Operations ------------------------------------- */ --mp-void: #04070d; /* Deepest background */ --mp-base: #0a0f1a; /* Primary background */ --mp-surface: #0f1623; /* Card / panel base */ --mp-surface-2: #151d2c; /* Elevated surface */ --mp-line: rgba(100, 255, 218, 0.08); /* Hairline mint borders */ --mp-line-strong: rgba(100, 255, 218, 0.18); /* --- Accent: HUD mint (matches app/src/styles/hud.css #64ffda) --------- */ --mp-mint: #64ffda; --mp-mint-dim: rgba(100, 255, 218, 0.65); --mp-mint-faint: rgba(100, 255, 218, 0.22); --mp-mint-glow: rgba(100, 255, 218, 0.35); /* --- Link hover (per-theme override below; defaults to bright white-mint pop) --- */ --mp-link-hover: #ffffff; --mp-link-hover-glow: rgba(100, 255, 218, 0.55); /* --- Secondary accents -------------------------------------------------- */ --mp-amber: #ffb74d; /* Warning / stale feed */ --mp-red: #ef4444; /* Error / offline */ --mp-violet: #b794f6; /* AI / cognitive accent */ --mp-blue: #38bdf8; /* Data / cool accent */ /* --- Status semantics --------------------------------------------------- */ --mp-status-live: var(--mp-mint); --mp-status-stale: var(--mp-amber); --mp-status-error: var(--mp-red); --mp-status-idle: #475569; /* --- Text --------------------------------------------------------------- */ --mp-text: #e2e8f0; --mp-text-dim: #94a3b8; --mp-text-faint: #64748b; --mp-text-mono: var(--mp-mint); /* Mono technical readouts use mint */ /* --- Typography --------------------------------------------------------- */ /* Sans: Geist Sans (cleaner, less default than Inter), fallback to Inter */ --mp-font-sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Mono: JetBrains Mono for technical readouts (coords, feed labels, HUD) */ --mp-font-mono: 'JetBrains Mono', 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace; /* Display: same as sans, but treated with -0.04em tracking for headlines */ --mp-font-display: var(--mp-font-sans); /* Type scale (modular, 1.25 ratio off 16px base) */ --mp-text-xs: 0.75rem; /* 12 */ --mp-text-sm: 0.875rem; /* 14 */ --mp-text-base: 1rem; /* 16 */ --mp-text-lg: 1.125rem; /* 18 */ --mp-text-xl: 1.375rem; /* 22 */ --mp-text-2xl: 1.75rem; /* 28 */ --mp-text-3xl: 2.25rem; /* 36 */ --mp-text-4xl: 2.875rem; /* 46 */ --mp-text-5xl: 3.75rem; /* 60 */ --mp-text-6xl: 4.875rem; /* 78 */ --mp-text-7xl: 6.25rem; /* 100 */ --mp-tracking-tight: -0.04em; --mp-tracking-normal: 0; --mp-tracking-wide: 0.05em; --mp-tracking-mono: 0.08em; /* Mono caps spacing — operator feel */ /* --- Radii / spacing ---------------------------------------------------- */ --mp-radius-sm: 0.25rem; --mp-radius: 0.5rem; --mp-radius-lg: 0.75rem; --mp-radius-xl: 1rem; /* --- Motion ------------------------------------------------------------- */ --mp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mp-ease-in: cubic-bezier(0.32, 0, 0.67, 0); --mp-ease: cubic-bezier(0.4, 0, 0.2, 1); --mp-dur-fast: 140ms; --mp-dur: 260ms; --mp-dur-slow: 480ms; /* --- Elevation --------------------------------------------------------- */ --mp-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.3); --mp-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --mp-shadow-glow: 0 0 20px var(--mp-mint-glow); --mp-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* --- Layers ------------------------------------------------------------ */ --mp-z-base: 1; --mp-z-hud: 500; --mp-z-nav: 1000; --mp-z-overlay: 2000; --mp-z-boot: 9999; } /* ============================================================================= * Vision Mode Themes — retint the entire HUD by swapping --mp-mint family. * Activated by setting `data-vision=""` on . All components that * reference --mp-mint, --mp-mint-dim, --mp-mint-faint, --mp-mint-glow, and * --mp-status-live get retinted automatically (status dots, brackets, chips, * panel labels, mint accents, hero accent, focus outlines, etc.). * ============================================================================= */ /* Tactical — khaki/amber matched to in-app HUD theme `tactical` (#b4a050) */ :root[data-vision="tactical"] { --mp-mint: #b4a050; --mp-mint-dim: rgba(180, 160, 80, 0.7); --mp-mint-faint: rgba(180, 160, 80, 0.22); --mp-mint-glow: rgba(180, 160, 80, 0.4); --mp-status-live: #b4a050; --mp-line: rgba(180, 160, 80, 0.2); --mp-line-strong: rgba(180, 160, 80, 0.32); --mp-text: #c8c0a0; --mp-text-dim: #8b8260; /* warm amber pop on hover (brighter than the khaki accent) */ --mp-link-hover: #ffd166; --mp-link-hover-glow: rgba(255, 209, 102, 0.55); } /* Blue Hour — cool sky blue, paired with the Blue Hour shader */ :root[data-vision="blue"] { --mp-mint: #38bdf8; --mp-mint-dim: rgba(56, 189, 248, 0.7); --mp-mint-faint: rgba(56, 189, 248, 0.22); --mp-mint-glow: rgba(56, 189, 248, 0.45); --mp-status-live: #38bdf8; --mp-line: rgba(56, 189, 248, 0.18); --mp-line-strong: rgba(56, 189, 248, 0.32); --mp-text: rgba(220, 235, 255, 0.94); --mp-text-dim: rgba(180, 205, 235, 0.65); /* icy near-white blue on hover */ --mp-link-hover: #c0e7ff; --mp-link-hover-glow: rgba(56, 189, 248, 0.6); } /* NVG — phosphor green, matches in-app HUD theme `nightvision` (#00ff41) */ :root[data-vision="nvg"] { --mp-mint: #00ff41; --mp-mint-dim: rgba(0, 255, 65, 0.7); --mp-mint-faint: rgba(0, 255, 65, 0.2); --mp-mint-glow: rgba(0, 255, 65, 0.45); --mp-status-live: #00ff41; --mp-line: rgba(0, 255, 65, 0.12); --mp-line-strong: rgba(0, 255, 65, 0.28); --mp-text: #00dd33; --mp-text-dim: #008822; /* phosphor white-green on hover */ --mp-link-hover: #ccffcc; --mp-link-hover-glow: rgba(0, 255, 65, 0.6); } /* Smooth tint cross-fades when vision mode changes (excluded under reduced-motion) */ :root { transition: --mp-mint 450ms var(--mp-ease), --mp-mint-dim 450ms var(--mp-ease), --mp-mint-faint 450ms var(--mp-ease), --mp-mint-glow 450ms var(--mp-ease), --mp-text 450ms var(--mp-ease), --mp-text-dim 450ms var(--mp-ease); } /* Reduced motion: collapse all motion durations */ @media (prefers-reduced-motion: reduce) { :root { --mp-dur-fast: 0.01ms; --mp-dur: 0.01ms; --mp-dur-slow: 0.01ms; } }