.font-minecraft {
      font-family: 'Press Start 2P';
  }

  h2 {
      font-family: 'Press Start 2P';
  }

  
  /* ── Theme tokens ── */
  :root {
      --bg: #d8d8d8e7;
      --bg-nav: #eee6e6a9;
      --bg-card: #f9fafb;
      --text: #111827;
      --text-muted: #4b5563;
      --text-subtle: #6b7280;
      --border: #e5e7eb;
      --hover-bg: #f3f4f6;
  }

  [data-theme="dark"] {
      --bg: #1f1c1c;
      --bg-nav: #111111;
      --bg-card: #1a1a1a;
      --text: #f3f4f6;
      --text-muted: #d1d5db;
      --text-subtle: #9ca3af;
      --border: #2a2a2a;
      --hover-bg: #1f1f1f;
  }

  body {
      background-color: var(--bg);
      color: var(--text);
      transition: background-color 0.25s, color 0.25s;
  }

  nav {
      background-color: var(--bg-nav);
      border-color: var(--border);
  }

  #mobile-menu {
      background-color: var(--bg-nav);
      border-color: var(--border);
  }

  /* Skills / border cards */
  .theme-border {
      border-color: var(--border);
  }

  .theme-card {
      background-color: var(--bg-card);
      border-color: var(--border);
  }

  /* Text helpers */
  .theme-muted {
      color: var(--text-muted);
  }

  .theme-subtle {
      color: var(--text-subtle);
  }

  /* Links */
  a {
      color: inherit;
  }

  /* Toggle button */
  #theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      cursor: pointer;
      color: var(--text);
      transition: background 0.2s;
      font-size: 15px;
      flex-shrink: 0;
  }

  #theme-toggle:hover {
      background: var(--hover-bg);
  }

  /* Hamburger lines */
  .ham-line {
      background-color: var(--text);
  }

  /* View-more buttons */
  .theme-btn {
      border: 1px solid var(--border);
      color: var(--text);
      background: transparent;
  }

  .theme-btn:hover {
      background: var(--hover-bg);
  }

  /* Video + project cards inherit border */
  #videos-container .border,
  #projects-container .border,
  #featured-project .border {
      border-color: var(--border);
      background-color: var(--bg-card);
  }

  /* Profile image: keep mix-blend only in light mode */
  [data-theme="dark"] #profile-img {
      mix-blend-mode: normal;
      opacity: 1;
  }