theme.css

/* ============================================================
   RecallOps Command — Command-center design tokens
   NORAD × SpaceX flight control × Palantir ops
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --bg:        #0A0E16;
  --bg-2:      #0D1320;
  --panel:     #121A28;
  --panel-2:   #16202F;
  --panel-3:   #1B2638;
  --raised:    #202D42;

  /* --- Borders --- */
  --border:    #1E2A3D;
  --border-2:  #28384F;
  --border-3:  #33465F;

  /* --- Text --- */
  --t1:  #E8EEF7;
  --t2:  #8A99B0;
  --t3:  #566179;
  --t4:  #3C455A;

  /* --- Agent accent (cyan→blue) --- */
  --cyan:   #06B6D4;
  --blue:   #3B82F6;
  --accent-grad: linear-gradient(135deg, #06B6D4, #3B82F6);
  --cyan-dim:  rgba(6,182,212,0.14);
  --cyan-line: rgba(6,182,212,0.34);
  --blue-dim:  rgba(59,130,246,0.14);

  /* --- Recall classification --- */
  --class-1: #EF4444;   /* Class I — most dangerous */
  --class-2: #F59E0B;   /* Class II */
  --class-3: #EAB308;   /* Class III */
  --class-1-dim: rgba(239,68,68,0.14);
  --class-2-dim: rgba(245,158,11,0.14);
  --class-3-dim: rgba(234,179,8,0.14);

  /* --- Semantic --- */
  --success:  #10B981;
  --success-dim: rgba(16,185,129,0.14);
  --danger:   #EF4444;
  --warning:  #F59E0B;

  /* --- Type --- */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-sans:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Radii (8px max) --- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --sh-1: 0 1px 0 rgba(255,255,255,0.025), 0 10px 28px -14px rgba(0,0,0,0.75);
  --sh-2: 0 1px 0 rgba(255,255,255,0.03), 0 30px 70px -28px rgba(0,0,0,0.88);
  --glow-cyan: 0 0 0 1px rgba(6,182,212,0.4), 0 0 30px -6px rgba(6,182,212,0.45);
  --glow-red:  0 0 0 1px rgba(239,68,68,0.4), 0 0 30px -6px rgba(239,68,68,0.4);
  --glow-emerald: 0 0 0 1px rgba(16,185,129,0.4), 0 0 26px -6px rgba(16,185,129,0.45);

  /* --- Layout --- */
  --rail-w: 232px;
  --rail-w-collapsed: 64px;
  --topbar-h: 52px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body, #root, main, section, .panel { min-width: 0; }
button, input, pre, code, table { max-width: 100%; }
button, .panel, .mono { overflow-wrap: anywhere; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--cyan-dim); color: var(--t1); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--t4); background-clip: content-box; }

.mono { font-family: var(--f-mono); }
.display { font-family: var(--f-display); }

.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0) 98px),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 2px rgba(0,0,0,0.28),
    0 18px 44px -24px rgba(0,0,0,0.78);
}

.label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ---- motion ---- */
@keyframes ro-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
.pulse-dot { animation: ro-pulse 2.2s ease-out infinite; }

@keyframes ro-rise { from { transform: translateY(9px); } to { transform: translateY(0); } }
.rise { animation: ro-rise var(--dur,0.45s) cubic-bezier(0.22,0.61,0.36,1) both; }

@keyframes ro-spin { to { transform: rotate(360deg); } }
.spin { animation: ro-spin 0.9s linear infinite; }

@keyframes ro-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 37%, rgba(255,255,255,0.03) 63%);
  background-size: 200% 100%;
  animation: ro-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-xs);
}

/* map ripple */
@keyframes ro-ripple {
  0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}

/* agent orb */
@keyframes ro-orb {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%     { transform: scale(1.18); opacity: 1; }
}

/* containment progress sweep */
@keyframes ro-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* executed ripple */
@keyframes ro-exec {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  100% { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
}

@keyframes ro-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.caret { animation: ro-blink 1s step-end infinite; }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot, .rise, .spin, .skeleton, .caret { animation: none !important; }
}

.no-sb::-webkit-scrollbar { display: none; }
/* premium chrome edges */
.ro-rail { box-shadow: inset -1px 0 0 rgba(255,255,255,0.025); }
.ro-topbar { box-shadow: inset 0 1px 0 rgba(255,255,255,0.035); }

.no-sb { scrollbar-width: none; }
.scroll-contain {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  contain: layout paint;
}

/* ============================================================
   Tweakable feel — atmosphere + density (driven by Tweaks panel)
   ============================================================ */
/* atmosphere: focus = clean & quiet, cinematic = alive & filmic */
body[data-atmo="focus"] #ro-grain { opacity: 0; }
body[data-atmo="focus"] #ro-aurora span { opacity: 0.05 !important; animation: none !important; }
body[data-atmo="focus"] .panel { box-shadow: none; }
body[data-atmo="cinematic"] #ro-grain { opacity: 0.11; }
body[data-atmo="cinematic"] #ro-aurora .a1 { opacity: 0.30 !important; }
body[data-atmo="cinematic"] #ro-aurora .a2 { opacity: 0.30 !important; }
body[data-atmo="cinematic"] .panel { box-shadow: var(--sh-1), 0 0 0 1px rgba(6,182,212,0.04); }

/* density: rescale the whole console */
body[data-density="compact"] main { zoom: 0.9; }
body[data-density="spacious"] main { zoom: 1.08; }
@supports not (zoom: 1) {
  body[data-density="compact"] main { transform: scale(0.9); transform-origin: top center; }
  body[data-density="spacious"] main { transform: scale(1.08); transform-origin: top center; }
}

/* ============================================================
   Premium layer — filmic texture, depth, organic motion
   ============================================================ */

/* filmic grain (fixed, above bg canvas, below content) */
#ro-grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
/* breathing aurora — two slow, organic glows */
#ro-aurora {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
#ro-aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.20;
}
#ro-aurora .a1 { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: radial-gradient(circle, #06B6D4, transparent 62%); animation: ro-breathe 16s ease-in-out infinite; }
#ro-aurora .a2 { width: 52vw; height: 52vw; right: -16vw; bottom: -20vw; background: radial-gradient(circle, #2563EB, transparent 62%); animation: ro-breathe 22s ease-in-out infinite reverse; }
@keyframes ro-breathe {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity: 0.16; }
  50%     { transform: translate3d(3vw,2vw,0) scale(1.14); opacity: 0.26; }
}

/* hover lift for cards */
.lift { transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s, border-color .26s; will-change: transform; }
.lift:hover {
  transform: translateY(-3px);
  border-color: var(--border-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 1px 2px rgba(0,0,0,0.3),
    0 26px 54px -26px rgba(0,0,0,0.88),
    0 0 0 1px color-mix(in srgb, var(--cyan) 9%, transparent),
    0 0 34px -16px color-mix(in srgb, var(--cyan) 60%, transparent);
}

.panel { transition: border-color .26s, box-shadow .26s; }

/* gradient number ink */
.num-grad {
  background: linear-gradient(135deg, #EAF2FF, #9FD8E8 55%, #6FB6FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* animated stat spark bar */
.spark { position: relative; height: 3px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.spark > i { position: absolute; inset: 0; transform-origin: left; border-radius: 999px; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }

/* count glow ping on completion */
@keyframes ro-ping { 0% { box-shadow: 0 0 0 0 rgba(6,182,212,.5);} 100% { box-shadow: 0 0 0 18px rgba(6,182,212,0);} }
.ping { animation: ro-ping .9s ease-out 1; }

/* briefing top progress bar */
#ro-brief-bar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 130;
  background: var(--accent-grad); box-shadow: 0 0 12px var(--cyan);
  transition: width .4s linear;
}

/* scroll reveal (organic, staggered via JS) */
.reveal-up { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal-up.in { opacity: 1; transform: none; }

/* flowing connector packet */
@keyframes ro-flowdown { 0% { transform: translateY(-6px); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }

/* button sheen */
@keyframes ro-sheen { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(220%); } }

@media (prefers-reduced-motion: reduce) {
  #ro-aurora span { animation: none !important; }
  .reveal-up { opacity: 1 !important; transform: none !important; }
  .ping { animation: none !important; }
}