html {
      scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
      html {
          scroll-behavior: auto;
      }

      * {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
      }
  }

  /* ============ THEME TOKENS ============
     Every color in the page reads from these CSS variables via
     Tailwind's arbitrary-value syntax, e.g. bg-[var(--bg)].
     Add a new theme by adding another [data-theme="..."] block. */

  :root,
  [data-theme="dark"] {
      --bg: #070A0D;
      --panel: #0F151C;
      --border: #1F2A35;
      --text: #E7EDF3;
      --dim: #7C8A99;
      --blue: #2AABEE;
      --green: #3DDC84;
      --yellow: #F2C94C;
      --glow-a: rgba(42, 171, 238, 0.10);
      --glow-b: rgba(61, 220, 132, 0.06);
      --grid-line: rgba(255, 255, 255, 0.035);
      --invert-text: #070A0D;
  }

  [data-theme="light"] {
      --bg: #FAFAF7;
      --panel: #FFFFFF;
      --border: #E2E1DA;
      --text: #14181C;
      --dim: #6B7280;
      --blue: #0E7FBF;
      --green: #1E9E5A;
      --yellow: #B8860B;
      --glow-a: rgba(14, 127, 191, 0.06);
      --glow-b: rgba(30, 158, 90, 0.05);
      --grid-line: rgba(0, 0, 0, 0.035);
      --invert-text: #FAFAF7;
  }

  body {
      background-color: var(--bg);
      color: var(--text);
      transition: background-color 0.25s ease, color 0.25s ease;
      background-image:
          radial-gradient(circle at 15% 8%, var(--glow-a), transparent 40%),
          radial-gradient(circle at 85% 30%, var(--glow-b), transparent 45%);
  }

  a:focus-visible,
  button:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
  }

  /* Typed.js injects its own cursor span with this class */
  .typed-cursor {
      color: var(--green);
      font-weight: 400;
  }

  .grid-bg {
      background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
          linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 28px 28px;
  }

  .glow-dot {
      box-shadow: 0 0 8px currentColor;
  }

  .fade-up {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .fade-up.in {
      opacity: 1;
      transform: translateY(0);
  }

  /* theme toggle switch */
  .theme-toggle {
      width: 46px;
      height: 26px;
      border-radius: 999px;
      background: var(--panel);
      border: 1px solid var(--border);
      position: relative;
      cursor: pointer;
      flex-shrink: 0;
  }

  .theme-toggle .knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--green);
      transition: transform 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
  }

  [data-theme="light"] .theme-toggle .knob {
      transform: translateX(20px);
      background: var(--yellow);
  }