/* ============================================================================
   Rotem Shevah — Slate Glass · design tokens (single source of truth)
   Load AFTER each tool's local CSS so these token values win.
   Skill: rotem-glass · §2 tokens, §3 blobs, §5 keyframes
   ============================================================================ */

/* ---- Fonts (shared) ------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600;700&display=swap');

/* ---- Dark mode (default) ------------------------------------------------- */
:root {
  --bg: #0f131b;
  --surface: rgba(35, 42, 55, .55);
  --card: rgba(42, 50, 65, .55);
  --glass-strong: rgba(48, 56, 74, .7);
  --glass-border: rgba(200, 215, 235, .14);
  --border: rgba(200, 215, 235, .1);
  --border-bright: rgba(200, 215, 235, .2);
  --accent: #6fa3ff;
  --accent2: #e2934f;
  --success: #3ed389;
  --danger: #e4685a;
  --warn: #e2a23f;
  --purple: #8b93e0;
  --text: #eef1f6;
  --muted: #7c8798;
  --text-muted: #7c8798;
  --text-dim: #5c6678;

  --mono: 'IBM Plex Mono', Consolas, monospace;
  --sans: 'IBM Plex Sans Hebrew', 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;

  --map-bg: #0b0e16;
  --map-grid: #1c2436;

  --ease: cubic-bezier(.23, 1, .32, 1);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px -12px rgba(0, 0, 0, .55);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 64px -20px rgba(0, 0, 0, .7);
  --scrim: rgba(6, 8, 12, .6);

  --b1: #24427a;   /* blob — steel blue   */
  --b2: #8a4a17;   /* blob — copper       */
  --b3: #3a4250;   /* blob — slate grey   */

  /* portal-landing aliases (index.html token names) */
  --bg2: var(--surface);
  --amber: var(--accent2);
  --green: var(--success);
  --red: var(--danger);
  --accent-dim: rgba(111, 163, 255, .12);
  --accent-mid: rgba(111, 163, 255, .25);
  --green-dim: rgba(62, 211, 137, .12);
  --amber-dim: rgba(226, 147, 79, .15);
  --purple-dim: rgba(139, 147, 224, .12);
  --red-dim: rgba(228, 104, 90, .12);
}

/* ---- Light mode ---------------------------------------------------------- */
body.light,
:root[data-theme="light"] {
  --bg: #eef1f6;
  --surface: rgba(255, 255, 255, .6);
  --card: rgba(255, 255, 255, .68);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-border: rgba(20, 32, 50, .1);
  --border: rgba(20, 32, 50, .08);
  --border-bright: rgba(20, 32, 50, .16);
  --accent: #3868b0;
  --accent2: #b5651d;
  --success: #1f8f5c;
  --danger: #c23b3b;
  --warn: #b3791d;
  --purple: #5b6bc9;
  --text: #1c222c;
  --muted: #5c6678;
  --text-muted: #5c6678;
  --text-dim: #8b93a3;

  --map-bg: #e6ebf3;
  --map-grid: #cdd6e6;

  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 20px -12px rgba(20, 30, 45, .18);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(20, 30, 45, .24);
  --scrim: rgba(20, 26, 36, .35);

  --b1: #3868b0;
  --b2: #b5651d;
  --b3: #6b7280;

  --bg2: var(--surface);
  --amber: var(--accent2);
  --green: var(--success);
  --red: var(--danger);
  --accent-dim: rgba(56, 104, 176, .12);
  --accent-mid: rgba(56, 104, 176, .25);
  --green-dim: rgba(31, 143, 92, .12);
  --amber-dim: rgba(181, 101, 29, .15);
  --purple-dim: rgba(91, 107, 201, .12);
  --red-dim: rgba(194, 59, 59, .12);
}

/* ---- Ambient background blobs (skill §3) --------------------------------- */
#bgBlobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#bgBlobs i {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  animation: driftBlob 26s ease-in-out infinite alternate;
}
#bgBlobs i:nth-child(1) { width: 380px; height: 380px; background: var(--b1); top: -100px; right: -80px; }
#bgBlobs i:nth-child(2) { width: 340px; height: 340px; background: var(--b2); bottom: -100px; left: -60px; animation-delay: -8s; }
#bgBlobs i:nth-child(3) { width: 300px; height: 300px; background: var(--b3); top: 45%; left: 40%; animation-delay: -16s; }

@keyframes driftBlob {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, -22px) scale(1.12); }
}

/* ---- Shared keyframes (skill §5) ----------------------------------------- */
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalPopIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #bgBlobs i { animation: none; }
}