/* ==========================================================================
   Portfolio — Theme Variables
   Dark Mode (default) · Light Mode
   ========================================================================== */

:root {
  /* Dark theme (default) */
  --bg: #0b0e17;
  --surface: #10131f;
  --text: #c8c8d0;
  --muted: #5e5e6e;
  --border: rgba(255, 255, 255, 0.06);
  --menu-bg: rgba(11, 14, 23, 0.97);
  --star-opacity: 0.07;

  /* Typography */
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

[data-theme="light"] {
  --bg: #f0ece6;
  --surface: #e8e4dc;
  --text: #2a2a2f;
  --muted: #7a7a84;
  --border: rgba(0, 0, 0, 0.07);
  --menu-bg: rgba(240, 236, 230, 0.98);
  --star-opacity: 0.02;
}

/* Smooth theme transitions */
body,
.header,
.header__link,
.contact__link,
.project-list__item {
  transition: background-color 0.2s ease, color 0.2s ease;
}