/* Color palette tokens (Light & Dark) */
:root {
  --primary-color: #2563eb; /* blue-600 */
  --secondary-color: #1e40af; /* blue-800 */

  --bg-color: #f8fafc; /* slate-50 */
  --surface-color: #ffffff; /* white */
  --text-color: #0f172a; /* slate-900 */
  --muted-text: #475569; /* slate-600 */
  --light-text: #f9fafb; /* slate-50 */
  --border-color: #e5e7eb; /* gray-200 */

  --hero-grad-1: rgba(37, 99, 235, 0.18);
  --hero-grad-2: rgba(30, 64, 175, 0.18);

  --section-bg: #eff6ff; /* blue-50 for projects segment */
  /* Code block tokens (Light) */
  --code-bg: #0b1220; /* deep navy */
  --code-text: #e5e7eb; /* soft light gray */
  --code-border: rgba(148, 163, 184, 0.25); /* slate-400 at 25% */
  --code-badge-bg: rgba(59,130,246,.12);
  --code-badge-text: #bfdbfe;
  --footer-bg: #0b1220; /* deep slate/navy */
  --footer-text: #e5e7eb; /* light text on dark footer */
  --footer-link: #93c5fd; /* blue-300 */
  --footer-link-hover: #bfdbfe; /* blue-200 */
}

[data-theme="dark"] {
  --bg-color: #0b1220; /* deep slate/navy */
  --surface-color: #111827; /* slate-900 */
  --text-color: #e5e7eb; /* slate-200 */
  --muted-text: #94a3b8; /* slate-400 */
  --border-color: rgba(255, 255, 255, 0.08);

  --hero-grad-1: rgba(11, 18, 32, 0.55);
  --hero-grad-2: rgba(14, 27, 61, 0.55);

  --section-bg: var(--bg-color);
  /* Code block tokens (Dark) */
  --code-bg: #0b1220; /* keep deep navy */
  --code-text: #e5e7eb;
  --code-border: rgba(148, 163, 184, 0.18);
  --code-badge-bg: rgba(59,130,246,.18);
  --code-badge-text: #bfdbfe;
  --footer-bg: #0b1220;
  --footer-text: #e5e7eb;
  --footer-link: #93c5fd;
  --footer-link-hover: #bfdbfe;
}