/* ═══════════════════════════════════════════════════════════════════════════
   PRAXIS — "The Loop" fusion tokens
   Macro layer  = the cosmos: blue-black void, cyan starlight, sector nebulas.
   Micro layer  = the Observatory instrument: brass amber, warm ink, mono data.
   One system. The wow lives in the transitions between altitudes.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Macro: the void ---------- */
  --void:        #03060D;     /* outermost cosmos (original theme color) */
  --void-2:      #050B14;     /* nebula floor */
  --starlight:   #9FE8E0;     /* distant star tint */
  --cyan:        #5CE6D5;     /* macro signal — wayfinding, focus, live */
  --cyan-bright: #8FF5E8;
  --cyan-fill:   rgba(92,230,213,0.10);
  --cyan-line:   rgba(92,230,213,0.32);
  --cyan-glow:   0 0 28px rgba(92,230,213,0.30);

  /* ---------- Micro: instrument surfaces ---------- */
  --surface-1:   #0B1115;
  --surface-2:   #101820;
  --surface-3:   #18222B;
  --glass:       rgba(8,13,17,0.72);

  /* ---------- Ink, warm ---------- */
  --text-primary:   #F2EFE3;
  --text-secondary: #BFC8C3;
  --text-muted:     #7E8A86;
  --text-faint:     #525D59;

  /* ---------- Lines ---------- */
  --line-hairline: rgba(242,239,227,0.06);
  --line-subtle:   rgba(242,239,227,0.12);
  --line-strong:   rgba(232,178,58,0.36);

  /* ---------- Instrument signals ---------- */
  --signal:        #E8B23A;   /* brass — actions, readiness, brand warmth */
  --signal-bright: #F5C24D;
  --signal-ink:    #1B1403;
  --signal-fill:   rgba(232,178,58,0.12);
  --signal-line:   rgba(232,178,58,0.34);
  --signal-glow:   0 0 24px rgba(232,178,58,0.28);
  --mastery:       #3FD8C0;
  --mastery-fill:  rgba(63,216,192,0.12);
  --mastery-glow:  0 0 22px rgba(63,216,192,0.24);
  --decay:         #FF5E4D;
  --decay-fill:    rgba(255,94,77,0.12);
  --decay-line:    rgba(255,94,77,0.40);

  /* ---------- Mastery perceptual ramp ---------- */
  --m-0: #FF5E4D; --m-1: #F0863C; --m-2: #E8B23A;
  --m-3: #B6C24A; --m-4: #6FD08A; --m-5: #3FD8C0;

  /* ---------- Type ---------- */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-ui:      "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Code", monospace;

  --t-display: 400 clamp(2.6rem, 1.8rem + 3vw, 4rem)/1.02 var(--font-display);
  --t-title:   400 1.9rem/1.08 var(--font-display);
  --t-heading: 600 1.2rem/1.2 var(--font-ui);
  --t-subhead: 600 1rem/1.3 var(--font-ui);
  --t-ui:      450 0.9375rem/1.5 var(--font-ui);
  --t-caption: 450 0.75rem/1.4 var(--font-ui);
  --track-label: 0.14em;

  /* ---------- Rhythm ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --elev-1: 0 1px 2px rgba(0,0,0,0.45);
  --elev-2: 0 6px 24px rgba(0,0,0,0.50);
  --elev-3: 0 18px 56px rgba(0,0,0,0.65);

  /* ---------- Motion grammar (named moves) ----------
     descent  : zoom INTO the cosmos (universe→sector→star)
     ascent   : zoom OUT
     dock     : panel entrance, staggered
     draw     : constellation line reveal
     ignite   : mastery pulse on a star                                      */
  --motion-scale: 1;                       /* tweakable global multiplier */
  --d-fast:     calc(160ms * var(--motion-scale));
  --d-standard: calc(280ms * var(--motion-scale));
  --d-dock:     calc(560ms * var(--motion-scale));
  --d-descent:  calc(900ms * var(--motion-scale));
  --d-draw:     calc(1200ms * var(--motion-scale));
  --ease-instrument: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-descent:    cubic-bezier(0.65, 0, 0.18, 1);
  --stagger: calc(70ms * var(--motion-scale));

  /* ---------- Density (tweakable) ---------- */
  --density: 1;
  --row-h: calc(40px * var(--density));
  --control-h: 36px;
  --topbar-h: 58px;
}

/* ═══ Base ═══ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--void);
  color: var(--text-primary);
  font: var(--t-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

::selection { background: rgba(92,230,213,0.25); }

/* dark instrument scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); }

/* film grain */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* vignette above the cosmos, below the UI */
.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 52%, rgba(0,0,0,0.62) 100%);
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ═══ Type primitives ═══ */
.kicker {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.6563rem;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.display { font: var(--t-display); color: var(--text-primary); margin: 0; }
.title   { font: var(--t-title);   color: var(--text-primary); margin: 0; }
.heading { font: var(--t-heading); color: var(--text-primary); margin: 0; }
.subhead { font: var(--t-subhead); color: var(--text-primary); margin: 0; }
.caption { font: var(--t-caption); color: var(--text-muted); }
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ═══ Instrument surfaces (micro layer) ═══ */
.panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(242,239,227,0.04);
}
.panel--glass {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* ═══ Named motion moves ═══ */
@keyframes dock-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes dock-in-left {
  from { opacity: 0; transform: translateX(26px); filter: blur(4px); }
  to   { opacity: 1; transform: translateX(0);    filter: blur(0); }
}
@keyframes ignite {
  0%   { box-shadow: 0 0 0 rgba(63,216,192,0); }
  40%  { box-shadow: 0 0 34px rgba(63,216,192,0.55); }
  100% { box-shadow: 0 0 18px rgba(63,216,192,0.25); }
}
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.breathe { animation: breathe 3.2s var(--ease-instrument) infinite; }

/* Entrance moves run ONLY when the document is actually receiving frames
   (html.motion-live is added from a requestAnimationFrame callback at boot).
   Frozen contexts — print, exports, throttled iframes — render the end state. */
.motion-live .dock { animation: dock-in var(--d-dock) var(--ease-instrument) backwards; }
.motion-live .dock-l { animation: dock-in-left var(--d-dock) var(--ease-instrument) backwards; }
.dock-1 { animation-delay: calc(var(--stagger) * 1); }
.dock-2 { animation-delay: calc(var(--stagger) * 2); }
.dock-3 { animation-delay: calc(var(--stagger) * 3); }
.dock-4 { animation-delay: calc(var(--stagger) * 4); }
.dock-5 { animation-delay: calc(var(--stagger) * 5); }
.dock-6 { animation-delay: calc(var(--stagger) * 6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .dock, .dock-l { animation: none; }
}