/* ============================================================================
   PRISM — token layer
   ----------------------------------------------------------------------------
   A sub-brand of the Quidoris Design System. Imports the Quidoris foundations
   and adds only what the explorer needs: a dark canvas, a scientific data-viz
   palette, three hypothesis hues, and the graph/pipeline node states.

   Load AFTER colors_and_type.css so the --q-* variables exist to build on.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600&family=JetBrains+Mono:wght@0,400;0,500;0,600&display=swap');

:root {
  /* Self-contained: the only --q-* vars the renderer references, inlined from
     the Quidoris colors_and_type.css so this file stands alone in the repo. */
  --q-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --q-font-serif: 'Newsreader', 'Charter', Georgia, serif;
  --q-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ===== DARK CANVAS ======================================================
     Blue-ink near-black — sits in the navy family, never pure #000 (which
     crushes the faint sky noise in cutouts). Hierarchy by luminance: panels
     lift by getting lighter, not by shadow. */
  --p-canvas:    #0a0e15;   /* deepest — the void behind everything */
  --p-surface-0: #0e131c;   /* base panel */
  --p-surface-1: #141b27;   /* raised panel / card */
  --p-surface-2: #1b2432;   /* control wells, hover */
  --p-surface-3: #232f40;   /* active / selected */
  --p-line:      #2a3647;   /* hairline on dark */
  --p-line-2:    #38465b;   /* stronger divider */

  /* Foreground on dark */
  --p-fg:        #e6e9ee;   /* primary text */
  --p-fg-strong: #f6f8fb;   /* headings / hot values */
  --p-fg-muted:  #8a94a3;   /* secondary, captions */
  --p-fg-subtle: #5d6678;   /* tertiary, axis labels */
  --p-fg-faint:  #3c4452;   /* gridlines */

  /* Brand navy, brightened for legibility on dark */
  --p-accent:    #4f97d1;   /* interactive / focus — navy-400 */
  --p-accent-2:  #73b3e7;   /* navy-300, hover */
  --p-accent-dim:#1a3a5c;   /* accent fills */
  --p-focus:     0 0 0 3px rgba(79,151,209,.35);

  /* ===== DATA-VIZ PALETTE (functional, not decorative) =================== */
  --p-trace:     #cdd6e3;   /* spectrum trace */
  --p-continuum: #5b8def;   /* continuum / V-shape fit */
  --p-broad:     #e0a93b;   /* broad-line component */
  --p-narrow:    #46b87a;   /* narrow-line component */
  --p-line-mark: #6fb6c9;   /* emission-line markers */
  --p-error:     rgba(205,214,227,.18);  /* error band */
  --p-grid:      rgba(120,134,158,.14);  /* plot gridlines */

  /* False-color cutout stops (documented; PNGs generated to match) */
  --p-fc-core:   #fff4e0;
  --p-fc-mid:    #ef8a3a;
  --p-fc-wing:   #b3331a;

  /* ===== THREE HYPOTHESES (signature hues) =============================== */
  --p-hyp-stellar: #f0a830;   /* warm amber — starlight */
  --p-hyp-agn:     #d6409f;   /* hot magenta — accretion */
  --p-hyp-bhstar:  #2bb8c4;   /* cyan — exotic */
  --p-hyp-stellar-dim: rgba(240,168,48,.16);
  --p-hyp-agn-dim:     rgba(214,64,159,.16);
  --p-hyp-bhstar-dim:  rgba(43,184,196,.16);

  /* ===== GRAPH / PIPELINE NODE OP-CLASS HUES ============================= */
  --p-op-pull:   #6c8cff;   /* ingestion */
  --p-op-reduce: #c9772e;   /* heavy reduction */
  --p-op-fit:    #46b87a;   /* analysis fit */
  --p-op-fuse:   #b06cd6;   /* multi-instrument fusion */
  --p-op-render: #4f97d1;   /* render */

  /* ===== STATE / SEMANTIC on dark ======================================== */
  --p-live:    #46b87a;   /* LIVE / clean */
  --p-frozen:  #73b3e7;   /* FROZEN */
  --p-dirty:   #e0a93b;   /* needs recompute */
  --p-gated:   #d6409f;   /* heavy / gated tier */
  --p-danger:  #e5604d;

  /* ===== MOTION (expressive — the cascade is a moment) =================== */
  --p-ease:        cubic-bezier(.2, 0, 0, 1);
  --p-ease-emph:   cubic-bezier(.16, 1, .3, 1);  /* decel for reveals */
  --p-dur-fast:    140ms;
  --p-dur-base:    260ms;
  --p-dur-cascade: 520ms;  /* one node lighting up in the recompute chain */

  /* ==========================================================================
     RUBICON PALETTE — folded in (lrd-explorer-design.md §6.3 "Unify")
     --------------------------------------------------------------------------
     These are the owner's authored CSS custom properties from the RUBICON
     console (Prism/lrd-console.html — the `.lrd-root` / EXTRACT REGION A
     <style> block). RUBICON ran a violet-black canvas with a ruby accent;
     this platform's --p-* set above runs a navy-black canvas with a
     navy/blue accent. Both are the owner's; the requirement is a SINGLE
     authored token set living in one file (this one). The lrd-root `--void`,
     `--ruby`, … variables are RETIRED in favor of these unified tokens.

     CONSOLIDATION RULE: where a RUBICON role maps cleanly onto an existing
     --p-* semantic, the mapping is noted in the comment so a port can reuse
     the platform token. Where the RUBICON VALUE differs from the existing
     --p-* value (every RUBICON color does — different canvas family), the
     existing locked --p-* value is left UNCHANGED and RUBICON's exact value
     is added here as a new --p-rubicon-* token. No existing value was
     overwritten; no color was invented. Values are byte-exact from RUBICON.

       RUBICON var   value      maps to (same role)        disposition
       -----------   --------   -------------------------  -------------------
       --void        #0B0A12    --p-canvas    (#0a0e15)    differs → new token
       --void2       #100E1A    --p-surface-0 (#0e131c)    differs → new token
       --panel       #16131F    --p-surface-1 (#141b27)    differs → new token
       --panel2      #1E1A2D    --p-surface-2 (#1b2432)    differs → new token
       --line        #2A2440    --p-line      (#2a3647)    differs → new token
       --line2       #393252    --p-line-2    (#38465b)    differs → new token
       --ink         #ECE9F5    --p-fg        (#e6e9ee)    differs → new token
       --dim         #A09BB6    --p-fg-muted  (#8a94a3)    differs → new token
       --faint       #6B6680    --p-fg-subtle (#5d6678)    differs → new token
       --ruby        #F4476B    (no platform equivalent)   new role / token
       --ruby2       #FF6B86    (no platform equivalent)   new role / token
       --ruby-deep   #9E1B3C    (no platform equivalent)   new role / token
       --uv          #5BC8FF    (no platform equivalent)   new role / token
       --violet      #B98BFF    ~--p-op-fuse  (#b06cd6)    differs → new token
       --amber       #FFB14E    ~--p-broad    (#e0a93b)    differs → new token
       --teal        #3FD9C0    ~--p-hyp-bhstar(#2bb8c4)   differs → new token
     ========================================================================== */

  /* Canvas / surfaces (violet-black hierarchy) */
  --p-rubicon-void:      #0B0A12;   /* deepest canvas        (RUBICON --void) */
  --p-rubicon-void2:     #100E1A;   /* inset / well          (RUBICON --void2) */
  --p-rubicon-panel:     #16131F;   /* base panel            (RUBICON --panel) */
  --p-rubicon-panel2:    #1E1A2D;   /* raised panel / hover  (RUBICON --panel2) */
  --p-rubicon-line:      #2A2440;   /* hairline              (RUBICON --line) */
  --p-rubicon-line2:     #393252;   /* stronger divider      (RUBICON --line2) */

  /* Foreground */
  --p-rubicon-ink:       #ECE9F5;   /* primary text          (RUBICON --ink) */
  --p-rubicon-dim:       #A09BB6;   /* secondary text        (RUBICON --dim) */
  --p-rubicon-faint:     #6B6680;   /* tertiary / captions   (RUBICON --faint) */

  /* Ruby accent (RUBICON's signature — no platform equivalent) */
  --p-rubicon-ruby:      #F4476B;   /* primary accent        (RUBICON --ruby) */
  --p-rubicon-ruby2:     #FF6B86;   /* accent hover / hot    (RUBICON --ruby2) */
  --p-rubicon-ruby-deep: #9E1B3C;   /* accent border / deep  (RUBICON --ruby-deep) */

  /* Secondary hues */
  --p-rubicon-uv:        #5BC8FF;   /* focus / link cyan-blue(RUBICON --uv) */
  --p-rubicon-violet:    #B98BFF;   /* gradient mid / fuse    (RUBICON --violet) */
  --p-rubicon-amber:     #FFB14E;   /* warm highlight         (RUBICON --amber) */
  --p-rubicon-teal:      #3FD9C0;   /* exotic / accent        (RUBICON --teal) */
}

/* ============================================================================
   BASE — the explorer canvas
   ============================================================================ */
.prism {
  background: var(--p-canvas);
  color: var(--p-fg);
  font-family: var(--q-font-sans, 'Public Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.prism ::selection { background: rgba(79,151,209,.32); color: #fff; }

/* Mono label tic, inherited spirit from Quidoris, recolored for dark */
.prism .p-eyebrow,
.prism .p-label {
  font-family: var(--q-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--p-fg-subtle); font-weight: 500;
}
.prism .p-value-mono {
  font-family: var(--q-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--p-fg-strong);
}

/* Panel — the workhorse container on dark */
.prism .p-panel {
  background: var(--p-surface-1);
  border: 1px solid var(--p-line);
  border-radius: 4px;
}
.prism .p-panel--inset { background: var(--p-surface-0); }
.prism .p-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--p-line);
}
.prism .p-panel-title {
  font-family: var(--q-font-serif, 'Newsreader', serif);
  font-size: 16px; font-weight: 500; color: var(--p-fg-strong); margin: 0;
}
.prism .p-panel-body { padding: 14px; }

/* Buttons on dark */
.prism .p-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--q-font-sans, sans-serif);
  padding: 9px 14px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent; transition: background var(--p-dur-fast) var(--p-ease), border-color var(--p-dur-fast);
}
.prism .p-btn--primary { background: var(--p-accent); color: #06223b; }
.prism .p-btn--primary:hover { background: var(--p-accent-2); }
.prism .p-btn--ghost { background: transparent; color: var(--p-fg); border-color: var(--p-line-2); }
.prism .p-btn--ghost:hover { background: var(--p-surface-2); }
.prism .p-btn:focus-visible { outline: none; box-shadow: var(--p-focus); }
.prism .p-btn--sm { padding: 6px 10px; font-size: 12px; }

/* Chips / tags on dark */
.prism .p-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1.4 var(--q-font-mono, monospace);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 3px;
  background: var(--p-surface-2); color: var(--p-fg-muted);
  border: 1px solid var(--p-line);
}
.prism .p-chip--live   { color: var(--p-live);   border-color: rgba(70,184,122,.4); }
.prism .p-chip--frozen { color: var(--p-frozen); border-color: rgba(115,179,231,.4); }
.prism .p-chip--gated  { color: var(--p-gated);  border-color: rgba(214,64,159,.4); }
.prism .p-chip--dirty  { color: var(--p-dirty);  border-color: rgba(224,169,59,.4); }

/* State dot */
.prism .p-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.prism .p-dot--live   { background: var(--p-live); }
.prism .p-dot--frozen { background: var(--p-frozen); }
.prism .p-dot--dirty  { background: var(--p-dirty); animation: p-pulse 1.1s infinite; }

@keyframes p-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) {
  .prism * { animation-duration: 0.001ms !important; }
}