@layer tokens {

  /* ===================================================
     Gold Accent Theme – The Teachings
     Version: 2.0 – Fully tokenized + !important
     =================================================== */

  /* ✦ Gold – Light Theme */
  html[data-theme="light"] body.gold {
    /* Core tokens */
    --bg-opacity: 0.32 !important;
    --text-primary: #1a1a1a !important;
    --text-secondary: #4a4a4a !important;
    --text-muted: #666 !important;

    /* Accents */
    --text-accent: #b88c2a !important;  /* deeper antique gold */
    --highlight: #fff6cc !important;    /* parchment-glow */
    --shadow-glow: rgba(245, 210, 120, 0.18) !important;
    --glyph-color: #d4af37 !important;  /* ceremonial gold */
    --strong-text: #c9a646 !important;
    --page-box-shadow: 0 0 20px rgba(245, 210, 120, 0.15) !important;
    --cite-color: #766535 !important;
    --accent-page: #b88c2a !important;
    --section-border: #fff6cc !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #fefcf8 0%,
      #f9f1dd 30%,
      #f1dfb8 55%,
      #e4c98f 80%,
      #d6b875 100%
    ) !important;

    --bg-primary: #fdf8ee !important; /* warm parchment cream */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */

    background: var(--bg-primary) !important;

    /* Badge tokens */
    --badge-bg: rgba(255, 246, 204, 0.65) !important;
    --badge-text: #735c1e !important;
    --badge-border: rgba(210, 180, 100, 0.45) !important;
    --badge-shadow: 0 1px 4px rgba(210, 180, 100, 0.15) !important;

    /* Footer */
    --footer-opacity: 0.94 !important;

    /* Overlay painter */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(255, 246, 204, 0.35),
      rgba(228, 201, 143, 0.35)
    ) !important;

    background: var(--bg-gradient) !important;
  }

  /* Component overrides – Light */
  html[data-theme="light"] body.gold .site-header,
  html[data-theme="light"] body.gold .site-footer {
    background: linear-gradient(to bottom, #ffffff, #fdf5e6) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="light"] body.gold .section-block {
    background: linear-gradient(145deg, #f9f1dd 0%, #f1dfb8 60%, #e4c98f 100%) !important;
    border-color: #fff6cc !important;
    box-shadow: 0 0 20px rgba(245, 210, 120, 0.18) !important;
  }

  html[data-theme="light"] body.gold .image-block {
    border: 1px solid #fff6cc !important;
    box-shadow: 0 0 16px rgba(245, 210, 120, 0.15) !important;
  }

  html[data-theme="light"] body.gold .quiz-question,
  html[data-theme="light"] body.gold .quiz-prompt {
    background: linear-gradient(to right, #f9f1dd, #f1dfb8) !important;
    color: var(--text-accent) !important;
    border-left: 4px solid #d4af37 !important;
    box-shadow: 0 0 12px rgba(245, 210, 120, 0.18) !important;
  }

  html[data-theme="light"] body.gold .quiz-options {
    background: #fefcf8 !important;
    border: 1px solid #fff6cc !important;
  }

  html[data-theme="light"] body.gold .quiz-options button,
  html[data-theme="light"] body.gold .quiz-button {
    background: #fefcf8 !important;
    color: #735c1e !important;
    border: 2px solid #d4af37 !important;
    box-shadow: 0 0 6px rgba(245, 210, 120, 0.15) inset !important;
  }

  html[data-theme="light"] body.gold .quiz-options button:hover,
  html[data-theme="light"] body.gold .quiz-button:hover {
    background: var(--highlight) !important;
    color: #4e3f10 !important;
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 12px rgba(210, 180, 100, 0.3) !important;
  }

  html[data-theme="light"] body.gold {
    /* Episode Navigation Tokens */
    --episode-nav-bg: linear-gradient(
      135deg,
      #fffaf4 0%,
      #f9f1dd 40%,
      #f1dfb8 80%
    ) !important;
    --episode-nav-border: rgba(0, 0, 0, 0.05) !important;
    --episode-nav-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;

    --episode-link-color: var(--text-accent) !important;
    --episode-link-bg-hover: var(--text-accent) !important;
    --episode-link-text-hover: #1a1a1a !important;
    --episode-link-border-hover: var(--text-accent) !important;
    --episode-link-glow: 0 0 15px rgba(184, 140, 42, 0.35) !important;

    --episode-divider-color: rgba(0, 0, 0, 0.35) !important;
  }

  /* ✦ Gold – Dark Theme */
  html[data-theme="dark"] body.gold {
    /* Core tokens */
    --bg-opacity: 0.16 !important;
    --text-primary: #f4f1ea !important;
    --text-secondary: #aaa !important;
    --text-muted: #888 !important;

    /* Accents */
    --text-accent: #d2a53e !important;  /* golden ochre */
    --highlight: #fbe89b !important;
    --shadow-glow: rgba(251, 215, 120, 0.25) !important;
    --glyph-color: #ffcc66 !important;
    --strong-text: #f6d87a !important;
    --page-box-shadow: 0 0 25px rgba(255, 222, 133, 0.25) !important;
    --cite-color: #d7c180 !important;
    --accent-page: #d2a53e !important;
    --section-border: #fbe89b !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #1a140a 0%,
      #2a1f0c 30%,
      #3c2b0d 55%,
      #6e4c1a 80%,
      #d2a53e 100%
    ) !important;

    --bg-primary: #1a140a !important; /* deep earthen gold tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;

    /* Badge tokens */
    --badge-bg: rgba(210, 180, 100, 0.35) !important;
    --badge-text: #f6d87a !important;
    --badge-border: rgba(210, 180, 100, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(210, 180, 100, 0.15) !important;

    /* Footer */
    --footer-opacity: 0.82 !important;

    /* Overlay painter */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(60, 43, 13, 0.35),
      rgba(110, 76, 26, 0.35)
    ) !important;

    background: var(--bg-gradient) !important;
  }

  /* Component overrides – Dark */
  html[data-theme="dark"] body.gold .site-header,
  html[data-theme="dark"] body.gold .site-footer {
    background: linear-gradient(to bottom, #0e0e0e, #1c1506) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="dark"] body.gold .section-block {
    background: linear-gradient(145deg, #2a1f0c 0%, #3c2b0d 50%, #6e4c1a 100%) !important;
    border-color: #fbe89b !important;
    box-shadow: 0 0 25px rgba(251, 215, 120, 0.25) !important;
  }

  html[data-theme="dark"] body.gold .image-block {
    border: 1px solid #fbe89b !important;
    box-shadow: 0 0 20px rgba(251, 215, 120, 0.2) !important;
  }

  html[data-theme="dark"] body.gold .quiz-question,
  html[data-theme="dark"] body.gold .quiz-prompt {
    background: linear-gradient(to right, #3c2b0d, #6e4c1a) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 14px rgba(255, 222, 133, 0.2) !important;
  }

  html[data-theme="dark"] body.gold .quiz-options {
    background: #1c1506 !important;
    border: 1px solid #fbe89b !important;
  }

  html[data-theme="dark"] body.gold .quiz-options button,
  html[data-theme="dark"] body.gold .quiz-button {
    background: #2a1f0c !important;
    color: var(--strong-text) !important;
    border: 2px solid var(--glyph-color) !important;
    box-shadow: 0 0 6px rgba(255, 222, 133, 0.15) inset !important;
  }

  html[data-theme="dark"] body.gold .quiz-options button:hover,
  html[data-theme="dark"] body.gold .quiz-button:hover {
    background: #3c2b0d !important;
    color: #fffde2 !important;
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 14px rgba(251, 215, 120, 0.3) !important;
  }

  html[data-theme="dark"] body.gold {
    --episode-nav-bg: linear-gradient(
      145deg,
      #2a1f0c 0%,
      #3c2b0d 50%,
      #6e4c1a 100%
    ) !important;
    --episode-nav-border: rgba(255, 255, 255, 0.08) !important;
    --episode-nav-shadow: 0 0 25px rgba(255, 222, 133, 0.25) !important;

    --episode-link-color: var(--text-accent) !important;
    --episode-link-bg-hover: var(--text-accent) !important;
    --episode-link-text-hover: #1a1a1a !important;
    --episode-link-border-hover: var(--text-accent) !important;
    --episode-link-glow: 0 0 15px rgba(251, 215, 120, 0.3) !important;

    --episode-divider-color: rgba(255, 255, 255, 0.5) !important;
  }
}

  /* ===================================================
     Global overlay reset (light/dark)
     =================================================== */
  html[data-theme="light"] body::before,
  html[data-theme="dark"] body::before {
    --overlay-bg-gradient: none !important;
    --overlay-img: none !important;
    opacity: 0 !important;
  }