/* ============================================================
   CollabIQ Explorer — Token system
   Aligned 1:1 with COLLABIQ_DESIGN_SYSTEM dashboard.
   Dark = default. Light = full parity.
   ============================================================ */

:root {
  /* Type families */
  --font-display: 'Satoshi', 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body: 'General Sans', 'Inter', system-ui, sans-serif;
  --font-sans: var(--font-body);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);

  /* Compact aliases used by Explorer chrome */
  --t-display: var(--text-2xl);
  --t-h1: var(--text-xl);
  --t-h2: var(--text-lg);
  --t-h3: var(--text-base);
  --t-body: var(--text-sm);
  --t-small: var(--text-xs);
  --t-micro: 11px;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-capsule: 9999px;

  --r-1: var(--radius-sm);
  --r-2: var(--radius-md);
  --r-3: var(--radius-lg);
  --r-4: var(--radius-xl);
  --r-pill: var(--radius-capsule);

  --duration-fast: 150ms;
  --duration: 240ms;
  --duration-slow: 480ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ===== DARK MODE (Default) — matches dashboard ===== */
:root[data-theme="dark"] {
  --color-deep: #06101e;
  --color-deep-mid: #0a1730;
  --color-deep-light: #10213a;
  --color-bg: #06101e;
  --color-text: #e2e8f0;
  --color-text-muted: rgba(226,232,240,0.6);
  --color-text-faint: rgba(226,232,240,0.35);
  --color-teal: #3dbbb0;
  --color-teal-bright: #58efe0;
  --color-teal-glow: #00E5BF;
  --color-amber: #f59e0b;
  --color-amber-warm: #D4A574;
  --color-rose: #f43f5e;
  --color-rose-light: #ff7190;
  --color-blue: #60a5fa;
  --color-violet: #a78bfa;
  --color-primary: #3dbbb0;

  /* Explorer layered backgrounds */
  --bg-0: var(--color-deep);
  --bg-1: var(--color-deep-mid);
  --bg-2: var(--color-deep-light);
  --bg-3: #16294a;

  /* Text aliases */
  --text-1: var(--color-text);
  --text-2: var(--color-text-muted);
  --text-3: var(--color-text-faint);
  --text-4: rgba(226,232,240,0.22);

  /* Accent (teal) — bridge to existing Explorer naming */
  --accent: var(--color-teal-bright);
  --accent-bright: var(--color-teal-glow);
  --accent-dim: var(--color-teal);
  --accent-deep: #2c8a82;
  --accent-glow: rgba(88,239,224,0.32);
  --accent-tint: rgba(88,239,224,0.10);
  /* Text color on --accent-bright bg. Dark mode = bright cyan ⇒ dark text. */
  --text-on-accent: #0a0a0a;
  /* Bottom-sheet drop shadow — heavier on dark canvas. */
  --mobile-sheet-shadow: 0 -16px 48px rgba(0,0,0,0.45);
  /* Drag handle on sheets — needs to read on translucent surface. */
  --drag-handle: rgba(255,255,255,0.3);

  /* Glass surfaces */
  --glass-spatial: rgba(255,255,255,0.04);
  --glass-ground: rgba(255,255,255,0.08);
  --glass-frosted: rgba(255,255,255,0.14);
  --glass-focus: rgba(88,239,224,0.08);
  --glass-dark: rgba(7,12,23,0.52);
  --glass-solid: rgba(15,23,42,0.85);
  --glass-border: rgba(255,255,255,0.12);
  --glass-border-strong: rgba(255,255,255,0.18);
  --glass-inset-top: rgba(255,255,255,0.10);
  --glass-inset-bottom: rgba(255,255,255,0.02);

  --hairline: var(--glass-border);
  --hairline-strong: var(--glass-border-strong);
  --hairline-specular: var(--glass-inset-top);

  /* Tier aliases (mathematical recipe) */
  --glass-1-bg: var(--glass-spatial);
  --glass-2-bg: var(--glass-ground);
  --glass-3-bg: linear-gradient(180deg, var(--glass-frosted), var(--glass-ground));
  --glass-blur: 24px;
  --glass-saturate: 160%;

  /* Shadows */
  --shadow-glass: 0 18px 48px rgba(0,0,0,0.28);
  --shadow-glass-sm: 0 4px 16px rgba(0,0,0,0.2);
  --shadow-glass-lg: 0 32px 64px rgba(0,0,0,0.4);
  --shadow-glow-teal: 0 0 30px rgba(61,187,176,0.15);
  --shadow-glow-amber: 0 0 30px rgba(245,158,11,0.12);
  --shadow-glow-rose: 0 0 30px rgba(244,63,94,0.12);

  --shadow-1: var(--shadow-glass-sm), inset 0 1px 0 var(--glass-inset-top);
  --shadow-2: var(--shadow-glass), inset 0 1px 0 var(--glass-inset-top);
  --shadow-float: var(--shadow-glass-lg), inset 0 1px 0 var(--glass-inset-top);

  --grid-color: rgba(255,255,255,0.04);
  --grid-color-strong: rgba(255,255,255,0.07);

  /* Semantic — graph entity colors (mapped to brand palette) */
  --ent-target:    var(--color-teal-bright);
  --ent-disease:   var(--color-rose-light);
  --ent-asset:     var(--color-teal);
  --ent-trial:     var(--color-amber);
  --ent-sponsor:   var(--color-violet);
  --ent-evidence:  var(--color-blue);

  /* Pipeline phase ramp (cool→warm) */
  --phase-disc:  #6b7fbf;
  --phase-pre:   #4a96d4;
  --phase-p1:    #3dbbb0;
  --phase-p2:    #58efe0;
  --phase-p3:    #d4a574;
  --phase-app:   #f59e0b;

  /* Edges */
  --edge-direct:    var(--color-teal-bright);
  --edge-inferred:  var(--color-amber);
  --edge-predicted: var(--color-blue);
  --edge-base:      rgba(255,255,255,0.18);

  /* Status */
  --success: var(--color-teal-bright);
  --warning: var(--color-amber);
  --danger:  var(--color-rose);

  /* Canvas backdrop — deep navy gradient + ambient orbs feel */
  --canvas-bg:
    radial-gradient(140% 110% at 50% -20%, rgba(94,224,210,0.07) 0%, transparent 55%),
    radial-gradient(closest-side at 80% 20%, rgba(94,224,210,0.06), transparent 70%),
    linear-gradient(180deg, #06101e 0%, #0a1730 60%, #10213a 100%);

  color-scheme: dark;
}

/* ===== LIGHT MODE — matches dashboard ===== */
:root[data-theme="light"] {
  --color-deep: #e8ecf4;
  --color-deep-mid: #e0e5ef;
  --color-deep-light: #d8dee9;
  --color-bg: #f0f2f7;
  --color-text: #0f172a;
  --color-text-muted: rgba(15,23,42,0.65);
  --color-text-faint: rgba(15,23,42,0.4);
  --color-teal: #0d8f86;
  --color-teal-bright: #0fa89d;
  --color-teal-glow: #10b981;
  --color-amber: #d97706;
  --color-amber-warm: #b8863e;
  --color-rose: #e11d48;
  --color-rose-light: #f43f5e;
  --color-blue: #2563eb;
  --color-violet: #7c3aed;
  --color-primary: #0d8f86;

  --bg-0: var(--color-bg);
  --bg-1: var(--color-deep);
  --bg-2: var(--color-deep-mid);
  --bg-3: var(--color-deep-light);

  --text-1: var(--color-text);
  --text-2: var(--color-text-muted);
  --text-3: var(--color-text-faint);
  --text-4: rgba(15,23,42,0.22);

  --accent: var(--color-teal-bright);
  --accent-bright: var(--color-teal);
  --accent-dim: var(--color-teal-glow);
  --accent-deep: #0a6b64;
  --accent-glow: rgba(15,168,157,0.25);
  --accent-tint: rgba(15,168,157,0.10);
  /* Light mode = dark teal accent ⇒ white text on top. */
  --text-on-accent: #ffffff;
  /* Light mode sheet shadow softer — heavy dark shadow on cream bg looks muddy. */
  --mobile-sheet-shadow: 0 -8px 32px rgba(15,23,42,0.18);
  /* Light mode drag handle — needs visible darker tone on cream sheet. */
  --drag-handle: rgba(15,23,42,0.32);

  --glass-spatial: rgba(255,255,255,0.45);
  --glass-ground: rgba(255,255,255,0.55);
  --glass-frosted: rgba(255,255,255,0.7);
  --glass-focus: rgba(13,143,134,0.08);
  --glass-dark: rgba(15,23,42,0.06);
  --glass-solid: rgba(255,255,255,0.92);
  --glass-border: rgba(0,0,0,0.10);
  --glass-border-strong: rgba(0,0,0,0.15);
  --glass-inset-top: rgba(255,255,255,0.8);
  --glass-inset-bottom: rgba(0,0,0,0.04);

  --hairline: var(--glass-border);
  --hairline-strong: var(--glass-border-strong);
  --hairline-specular: var(--glass-inset-top);

  --glass-1-bg: var(--glass-spatial);
  --glass-2-bg: var(--glass-ground);
  --glass-3-bg: linear-gradient(180deg, var(--glass-frosted), var(--glass-ground));
  --glass-blur: 24px;
  --glass-saturate: 160%;

  --shadow-glass: 0 18px 48px rgba(15,23,42,0.12);
  --shadow-glass-sm: 0 4px 16px rgba(15,23,42,0.08);
  --shadow-glass-lg: 0 32px 64px rgba(15,23,42,0.15);
  --shadow-glow-teal: 0 0 30px rgba(13,143,134,0.08);
  --shadow-glow-amber: 0 0 30px rgba(217,119,6,0.08);
  --shadow-glow-rose: 0 0 30px rgba(225,29,72,0.08);

  --shadow-1: var(--shadow-glass-sm), inset 0 1px 0 var(--glass-inset-top);
  --shadow-2: var(--shadow-glass), inset 0 1px 0 var(--glass-inset-top);
  --shadow-float: var(--shadow-glass-lg), inset 0 1px 0 var(--glass-inset-top);

  --grid-color: rgba(15,23,42,0.06);
  --grid-color-strong: rgba(15,23,42,0.09);

  --ent-target:    var(--color-teal-bright);
  --ent-disease:   var(--color-rose);
  --ent-asset:     var(--color-teal);
  --ent-trial:     var(--color-amber);
  --ent-sponsor:   var(--color-violet);
  --ent-evidence:  var(--color-blue);

  --phase-disc:  #5a6fb0;
  --phase-pre:   #2563eb;
  --phase-p1:    #0d8f86;
  --phase-p2:    #0fa89d;
  --phase-p3:    #b8863e;
  --phase-app:   #d97706;

  --edge-direct:    var(--color-teal);
  --edge-inferred:  var(--color-amber);
  --edge-predicted: var(--color-blue);
  --edge-base:      rgba(15,23,42,0.18);

  --success: var(--color-teal);
  --warning: var(--color-amber);
  --danger:  var(--color-rose);

  --canvas-bg:
    radial-gradient(1200px 800px at 80% -20%, rgba(13,143,134,0.10), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(37,99,235,0.08), transparent 60%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-deep) 100%);

  color-scheme: light;
}

/* ── Reset ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--accent-tint); color: var(--color-text); }

/* ── Glass material — 3 tiers ─────────────────────────────── */
.glass-1 {
  background: var(--glass-1-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-1);
}
.glass-2 {
  background: var(--glass-2-bg);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.1)) saturate(var(--glass-saturate));
  backdrop-filter: blur(calc(var(--glass-blur) * 1.1)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2);
}
.glass-3 {
  background: var(--glass-3-bg);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(var(--glass-saturate));
  backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-float);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-1, .glass-2, .glass-3 { background: var(--bg-2); }
}

/* Scrollbars */
.scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border-strong) transparent;
}
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--glass-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); background-clip: padding-box; }

/* Utility */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "cv11"; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--color-text-muted);
  background: var(--glass-ground);
  border: 1px solid var(--glass-border-strong);
  border-radius: 4px;
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.2);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}