@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@400;500;600;700;800&display=swap");
@import url("../../shared/study-base.css");

:root {
  --bg: #f0eef8;
  --bg-card: rgba(244, 242, 255, 0.84);
  --bg-card-hover: rgba(248, 246, 255, 0.96);
  --bg-sidebar: rgba(14, 12, 36, 0.82);
  --border: rgba(55, 48, 120, 0.15);
  --border-light: rgba(234, 232, 252, 0.14);
  --text: #1a1632;
  --text-muted: #5e5878;
  --text-dim: #8580a0;
  --text-inverse: #eeedf8;
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-glow: rgba(99, 102, 241, 0.14);
  --blue: #3b82f6;
  --blue-bg: rgba(59, 130, 246, 0.1);
  --yellow-bg: rgba(139, 92, 246, 0.12);
  --purple: #8b5cf6;
  --shadow: 0 30px 90px rgba(12, 10, 30, 0.18);
  --shadow-soft: 0 20px 44px rgba(18, 14, 40, 0.08);
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;

  --dark-bg: #0c0a1e;
  --dark-bg-2: #1a1540;
  --light-bg-1: #ebe8f4;
  --accent-rgb: 99, 102, 241;
  --accent-strong-rgb: 79, 70, 229;
  --secondary-rgb: 139, 92, 246;
  --dark-rgb: 12, 10, 30;
  --dark-2-rgb: 26, 21, 64;
  --dark-shadow-rgb: 6, 4, 18;
  --shadow-medium-rgb: 18, 14, 40;
  --shadow-card-rgb: 55, 48, 120;
  --border-rgb: 55, 48, 120;
  --grid-line-rgb: 120, 115, 200;
  --hero-highlight: #a5b4fc;
  --hero-highlight-rgb: 165, 180, 252;
  --hero-text: #f5f3ff;
  --sidebar-link-accent: #ddd6fe;
  --sidebar-text-rgb: 238, 235, 252;
  --sidebar-border-rgb: 224, 221, 248;
  --section-bg-rgb: 244, 242, 255;
  --section-bg-2-rgb: 238, 235, 250;
  --hero-border-rgb: 130, 120, 210;
  --btn-primary-text: #0c0a1e;
  --table-th-bg-rgb: 238, 235, 252;
  --chip-bg-rgb: 59, 130, 246;

  /* Course asset hooks — see shared/study-base.css for the selector
     block that consumes these tokens. url() in custom-property values is
     resolved relative to the *consuming* stylesheet (a CSS spec footgun),
     so these paths are absolute-from-root. */
  --course-hero-bg: url("/5270RandomAlgo/shared/assets/algo-hero.png");
  --course-divider-bg: url("/5270RandomAlgo/shared/assets/algo-divider.png");
  --course-divider-display: block;
  --course-accent-bg: url("/5270RandomAlgo/shared/assets/algo-accent.png");
}