@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: #f7f4ef;
  --bg-card: rgba(255, 252, 248, 0.9);
  --bg-card-hover: rgba(255, 255, 255, 0.96);
  --bg-sidebar: rgba(28, 25, 20, 0.88);
  --border: rgba(120, 90, 40, 0.14);
  --border-light: rgba(250, 240, 220, 0.12);
  --text: #1c1917;
  --text-muted: #57534e;
  --text-dim: #78716c;
  --text-inverse: #fffbeb;
  --accent: #d97706;
  --accent-strong: #b45309;
  --accent-glow: rgba(217, 119, 6, 0.14);
  --blue: #2563eb;
  --blue-bg: rgba(37, 99, 235, 0.1);
  --yellow-bg: rgba(251, 191, 36, 0.12);
  --purple: #7c3aed;
  --shadow: 0 30px 90px rgba(28, 25, 20, 0.12);
  --shadow-soft: 0 20px 44px rgba(28, 25, 20, 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: #1c1917;
  --dark-bg-2: #292524;
  --light-bg-1: #fafaf9;
  --accent-rgb: 217, 119, 6;
  --accent-strong-rgb: 180, 83, 9;
  --secondary-rgb: 245, 158, 11;
  --dark-rgb: 28, 25, 20;
  --dark-2-rgb: 41, 37, 36;
  --dark-shadow-rgb: 12, 10, 9;
  --shadow-medium-rgb: 28, 25, 20;
  --shadow-card-rgb: 120, 90, 40;
  --border-rgb: 120, 90, 40;
  --grid-line-rgb: 214, 211, 209;
  --hero-highlight: #fde68a;
  --hero-highlight-rgb: 253, 230, 138;
  --hero-text: #fffbeb;
  --sidebar-link-accent: #fef3c7;
  --sidebar-text-rgb: 255, 251, 235;
  --sidebar-border-rgb: 245, 230, 200;
  --section-bg-rgb: 255, 252, 248;
  --section-bg-2-rgb: 250, 245, 238;
  --section-title-dark: #1c1917;
  --hero-border-rgb: 251, 191, 36;
  --btn-primary-text: #1c1917;
  --table-th-bg-rgb: 255, 251, 235;
  --chip-bg-rgb: 217, 119, 6;
  --hero-img-opacity: 0.5;
  --hero-img-filter: drop-shadow(0 0 28px rgba(217, 119, 6, 0.2));
  --hero-before-opacity: 0.95;
  --hero-before-bg-size: auto, auto, 58% auto;
  --hero-before-bg-position: 12% 18%, 86% 12%, right -4rem top -1rem;
}

body::after {
  background: radial-gradient(
      circle at 20% 30%,
      rgba(217, 119, 6, 0.08),
      transparent 40%
    ),
    radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.1), transparent 38%);
}
.hero-section::before {
  background-image: radial-gradient(
      circle at 14% 16%,
      rgba(var(--accent-rgb), 0.2),
      transparent 22%
    ),
    radial-gradient(circle at 88% 14%, rgba(var(--secondary-rgb), 0.16), transparent 24%),
    radial-gradient(ellipse at 90% 10%, rgba(251, 191, 36, 0.12), transparent 45%);
}