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

:root {
  --bg: #f4efe7;
  --bg-card: rgba(255, 250, 243, 0.84);
  --bg-card-hover: rgba(255, 252, 247, 0.96);
  --bg-sidebar: rgba(10, 24, 33, 0.82);
  --border: rgba(24, 67, 79, 0.15);
  --border-light: rgba(238, 247, 246, 0.14);
  --text: #18262f;
  --text-muted: #586a73;
  --text-dim: #7a888f;
  --text-inverse: #edf7f5;
  --accent: #14b8a6;
  --accent-strong: #0c8c81;
  --accent-glow: rgba(20, 184, 166, 0.14);
  --blue: #2563eb;
  --blue-bg: rgba(37, 99, 235, 0.1);
  --yellow-bg: rgba(255, 181, 106, 0.12);
  --purple: #6d5bd0;
  --shadow: 0 30px 90px rgba(7, 18, 25, 0.18);
  --shadow-soft: 0 20px 44px rgba(11, 25, 32, 0.08);
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --dark-bg: #08141c;
  --dark-bg-2: #102634;
  --light-bg-1: #edf1ef;
  --accent-rgb: 20, 184, 166;
  --accent-strong-rgb: 15, 118, 110;
  --secondary-rgb: 255, 181, 106;
  --dark-rgb: 8, 20, 28;
  --dark-2-rgb: 16, 38, 52;
  --dark-shadow-rgb: 3, 10, 16;
  --shadow-medium-rgb: 11, 25, 32;
  --shadow-card-rgb: 88, 70, 42;
  --border-rgb: 24, 67, 79;
  --grid-line-rgb: 120, 176, 191;
  --hero-highlight: #9aeadd;
  --hero-highlight-rgb: 154, 234, 221;
  --hero-text: #f5fbf9;
  --sidebar-link-accent: #d9fcf4;
  --sidebar-text-rgb: 236, 247, 245;
  --sidebar-border-rgb: 225, 243, 241;
  --section-bg-rgb: 255, 250, 243;
  --section-bg-2-rgb: 249, 244, 236;
  --section-title-dark: #17333b;
  --hero-border-rgb: 110, 176, 191;
  --btn-primary-text: #07131b;
  --table-th-bg-rgb: 239, 248, 246;
  --chip-bg-rgb: 36, 87, 214;
  --hero-img-opacity: 0.62;
  --hero-img-filter: drop-shadow(0 0 32px rgba(20, 184, 166, 0.14));
  --hero-before-opacity: 0.92;
  --hero-before-bg-size: auto, auto, 62% auto;
  --hero-before-bg-position: 14% 16%, 88% 14%, right -5rem top -2rem;

  /* Course asset hooks — consumed by selectors in shared/study-base.css.
     This course uses an SVG mesh instead of a raster hero, so we override
     the default positioning/sizing. */
  --course-hero-bg: url("/5318ML/shared/assets/neural-mesh.svg");
  --course-hero-bg-position: center;
  --course-hero-bg-size: contain;
}