/* ══════════════════════════════════════
   variables.css — Theme tokens & easings
   ══════════════════════════════════════ */
:root {
  --bg-color: #030510;
  --text-main: #e8edf5;
  --text-sub: #8a9bb8;
  --accent-color: #00c8ff;
  --accent-glow: #3d8eff;

  --glass-bg: rgba(8, 12, 30, 0.78);
  --glass-border: rgba(0, 200, 255, 0.25);
  --glass-shine: rgba(255, 255, 255, 0.08);

  --code-bg: #060810;
  --code-text: #d0dae8;
  --code-green: #00e0a0;
  --code-dim: #4a5568;

  --shadow-1: 0 10px 30px rgba(0, 6, 20, 0.6);
  --shadow-2: 0 20px 60px -15px rgba(0, 10, 40, 0.7);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-bg: rgba(6, 10, 25, 0.88);
  --nav-text: #c0d0e8;
  --nav-hover: #00c8ff;
}

[data-theme="light"] {
  --bg-color: #f0f4fa;
  --text-main: #0f1a2e;
  --text-sub: #4a5e7a;
  --accent-color: #1a6dcc;
  --accent-glow: #4a9ae8;
  --glass-bg: rgba(240, 245, 255, 0.92);
  --glass-border: rgba(26, 109, 204, 0.22);
  --glass-shine: rgba(255, 255, 255, 0.6);
  --shadow-1: 0 10px 30px rgba(10,30,60,0.10);
  --shadow-2: 0 20px 60px -15px rgba(10,30,60,0.14);
  --nav-bg: rgba(240, 245, 255, 0.92);
  --nav-text: #2a3e5c;
  --nav-hover: #1a6dcc;
}

/* Code mode variable overrides */
[data-mode="code"] {
  --accent-color: var(--code-green);
  --bg-color: var(--code-bg);
}
[data-theme="light"][data-mode="code"] {
  --bg-color: var(--code-bg);
  --text-main: var(--code-text);
}