/* ===== Design Tokens & Theme Variables ===== */
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --transition: 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  --radius: 6px;
  --radius-lg: 10px;

  --content-max: 640px;
  --sidebar-width: 46%;
}

/* =============================================
   DARK THEME (default) — elegant slate + teal
   ============================================= */
[data-theme="dark"] {
  --bg: #0a192f;
  --bg-elevated: #112240;
  --bg-hover: rgba(100, 255, 218, 0.06);

  --text-primary: #e6f1ff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --accent: #64ffda;
  --accent-hover: #a5ffe9;
  --accent-glow: rgba(100, 255, 218, 0.12);
  --accent-contrast: #0a192f;

  --border: #1e2d48;
  --border-hover: #64ffda;

  --shadow-lg: 0 20px 40px -18px rgba(2, 12, 27, 0.75);

  --spotlight: rgba(100, 255, 218, 0.06);
  --tag-bg: rgba(100, 255, 218, 0.1);
  --tag-text: #64ffda;

  --icon-moon-display: none;
  --icon-sun-display: block;
}

/* =============================================
   LIGHT THEME — warm ivory + deep teal ink
   ============================================= */
[data-theme="light"] {
  --bg: #fdfdfb;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(13, 148, 136, 0.05);

  --text-primary: #0f2e2a;
  --text-secondary: #47635f;
  --text-muted: #7d908c;

  --accent: #0d9488;
  --accent-hover: #0b7a70;
  --accent-glow: rgba(13, 148, 136, 0.14);
  --accent-contrast: #ffffff;

  --border: #e2e6e2;
  --border-hover: #0d9488;

  --shadow-lg: 0 20px 40px -20px rgba(15, 46, 42, 0.25);

  --spotlight: rgba(13, 148, 136, 0.08);
  --tag-bg: rgba(13, 148, 136, 0.1);
  --tag-text: #0b7a70;

  --icon-moon-display: block;
  --icon-sun-display: none;
}

/* ===== Cursor spotlight glow ===== */
.spotlight {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  transition: background 0.15s ease;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--spotlight),
    transparent 40%
  );
}

/* Disable spotlight on touch / reduced motion */
@media (hover: none) {
  .spotlight {
    display: none;
  }
}