@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700|JetBrains+Mono:wght@400;600;700&display=swap");

:root {
  --bg-color: #ffffff;
  --surface-color: #f8f9fa;
  --text-color: #212529;
  --heading-color: #111827;
  --accent-color: #a82ee6;
  --accent-hover: #8a22bc;
  --link-color: #a82ee6;
  --border-color: #dee2e6;
  --nav-bg: #1a1a2e;
  --nav-text: #ffffff;
  --btn-primary-bg: #a82ee6;
  --btn-primary-text: #ffffff;
  --code-bg: #f3e8ff;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-size-base: 16px;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-nav: 0.95rem;
  --font-size-btn: 0.95rem;
  --font-size-small: 0.85rem;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --line-height-body: 1.7;
  --border-radius-btn: 0.5rem;
  --border-radius-card: 0.75rem;
}

[data-bs-theme=dark] {
  --bg-color: #0f0f1a;
  --surface-color: #1a1a2e;
  --text-color: #e9ecef;
  --heading-color: #f8f9fa;
  --accent-color: #c44dff;
  --accent-hover: #a82ee6;
  --link-color: #c44dff;
  --border-color: #2d2d44;
  --nav-bg: #0a0a14;
  --nav-text: #e9ecef;
  --btn-primary-bg: #c44dff;
  --btn-primary-text: #ffffff;
  --code-bg: #1e1e2e;
}

/* Apply CSS variables to elements */
body { font-family: var(--font-body); font-size: var(--font-size-base);
       color: var(--text-color); background-color: var(--bg-color);
       font-weight: var(--font-weight-body); line-height: var(--line-height-body); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading);
                      color: var(--heading-color); font-weight: var(--font-weight-heading); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
a { color: var(--link-color); }
a:hover { color: var(--accent-hover); }
code, pre { font-family: var(--font-mono); background: var(--code-bg); }
.navbar { background-color: var(--nav-bg) !important; }
.navbar a, .navbar .nav-link { color: var(--nav-text) !important;
                               font-size: var(--font-size-nav); }
.btn-primary { background-color: var(--btn-primary-bg);
               color: var(--btn-primary-text); border-color: var(--btn-primary-bg);
               font-size: var(--font-size-btn);
               border-radius: var(--border-radius-btn); }
.btn-primary:hover { background-color: var(--accent-hover);
                     border-color: var(--accent-hover); }
.card { background-color: var(--surface-color); border-color: var(--border-color);
        border-radius: var(--border-radius-card); }
small, .small { font-size: var(--font-size-small); }