@layer tokens {

  /* ===================================================
     Lightgold Accent Theme – The Gnostic Key
     Version: 2.1 – All tokens marked !important
     =================================================== */

  /* ===================================================
     LIGHT MODE
     =================================================== */
  html[data-theme="light"] body.lightgold {
    /* Core tokens */
    --bg-opacity: 0.3 !important;
    --text-primary: #1a1a1a !important;
    --text-secondary: #4a4a4a !important;
    --text-muted: #666 !important;

    /* Accents */
    --text-accent: #a08040 !important;
    --highlight: #e8d58a !important; /* slightly darkened for readability */
    --shadow-glow: rgba(238, 209, 145, 0.14) !important;
    --glyph-color: #c6a968 !important;
    --strong-text: #b39558 !important;
    --page-box-shadow: 0 0 18px rgba(238, 209, 145, 0.12) !important;
    --cite-color: #b39558 !important;
    --accent-page: #a08040 !important;
    --section-border: #fdf3c2 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #fefbf4 0%,
      #f5ebd2 30%,
      #e8d5a8 60%,
      #d9c089 85%,
      #bfa268 100%
    ) !important;
    --bg-gradient: var(--card-gradient) !important;

    /* Badge tokens */
    --badge-bg: rgba(253, 243, 194, 0.65) !important;
    --badge-text: #6a5324 !important;
    --badge-border: rgba(191, 162, 104, 0.45) !important;
    --badge-shadow: 0 1px 4px rgba(191, 162, 104, 0.15) !important;

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

    /* Overlay painter */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(253, 243, 194, 0.35),
      rgba(232, 213, 168, 0.35)
    ) !important;

    --bg-primary: #fefbf4 !important; /* soft parchment gold base */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;
  }

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

  html[data-theme="light"] body.lightgold .section-block {
    background: linear-gradient(145deg, #f5ebd2 0%, #e8d5a8 50%, #d9c08982 100%) !important;
    border-color: #fdf3c2 !important;
    box-shadow: 0 0 18px rgba(238, 209, 145, 0.12) !important;
  }

  html[data-theme="light"] body.lightgold .section-block p,
  html[data-theme="light"] body.lightgold .section-block li {
    text-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  }

  html[data-theme="light"] body.lightgold .image-block {
    border: 1px solid #fdf3c2 !important;
    box-shadow: 0 0 16px rgba(238, 209, 145, 0.1) !important;
  }

  html[data-theme="light"] body.lightgold .quiz-question,
  html[data-theme="light"] body.lightgold .quiz-prompt {
    background: linear-gradient(to right, #fefbf4, #f5ebd2) !important;
    color: var(--text-accent) !important;
    border-left: 4px solid #c6a968 !important;
    box-shadow: 0 0 12px rgba(238, 209, 145, 0.12) !important;
  }

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

  html[data-theme="light"] body.lightgold .quiz-options button,
  html[data-theme="light"] body.lightgold .quiz-button {
    background: #f7da8b !important;
    color: #6a5324 !important;
    border: 2px solid #c6a968 !important;
    box-shadow: 0 0 6px rgba(238, 209, 145, 0.15) inset !important;
  }

  html[data-theme="light"] body.lightgold .quiz-options button:hover,
  html[data-theme="light"] body.lightgold .quiz-button:hover {
    background: var(--highlight) !important;
    color: #3a2c0e !important;
    border-color: #bfa268 !important;
    box-shadow: 0 0 12px rgba(191, 162, 104, 0.3) !important;
  }

  /* ===================================================
     DARK MODE
     =================================================== */
  html[data-theme="dark"] body.lightgold {
    /* Core tokens */
    --bg-opacity: 0.95 !important;
    --text-primary: #f4f1ea !important;
    --text-secondary: #aaa !important;
    --text-muted: #888 !important;

    /* Accents */
    --text-accent: #d2b56d !important; /* stronger gold for contrast */
    --highlight: #e3d2a2 !important;
    --shadow-glow: rgba(210, 190, 120, 0.18) !important;
    --glyph-color: #d4bc85 !important;
    --strong-text: #e8ce98 !important;
    --page-box-shadow: 0 0 22px rgba(240, 210, 140, 0.15) !important;
    --cite-color: #e8ce98 !important;
    --accent-page: #bfa865 !important;
    --section-border: #e3d2a2 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #181409 0%,
      #2d240f 25%,
      #3a2e14 50%,
      #5b4722 75%,
      #bfa865 100%
    ) !important;

    --bg-primary: #181409 !important; /* deep antique gold tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;

    /* Badge tokens */
    --badge-bg: rgba(191, 162, 104, 0.35) !important;
    --badge-text: #e8ce98 !important;
    --badge-border: rgba(191, 162, 104, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(191, 162, 104, 0.15) !important;

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

    /* Overlay painter */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(58, 46, 20, 0.35),
      rgba(95, 71, 34, 0.35)
    ) !important;

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

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

  html[data-theme="dark"] body.lightgold .section-block {
    background: linear-gradient(145deg, #2d240f 0%, #3a2e14 50%, #5b4722 100%) !important;
    border-color: #e3d2a2 !important;
    box-shadow: 0 0 22px rgba(210, 190, 120, 0.15) !important;
  }

  html[data-theme="dark"] body.lightgold .section-block p,
  html[data-theme="dark"] body.lightgold .section-block li {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
  }

  html[data-theme="dark"] body.lightgold .image-block {
    border: 1px solid #e3d2a2 !important;
    box-shadow: 0 0 18px rgba(210, 190, 120, 0.12) !important;
  }

  html[data-theme="dark"] body.lightgold .quiz-question,
  html[data-theme="dark"] body.lightgold .quiz-prompt {
    background: linear-gradient(to right, #3a2e14, #5b4722) !important;
    color: #e8ce98 !important;
    border-left: 4px solid #d4bc85 !important;
    box-shadow: 0 0 14px rgba(240, 210, 140, 0.15) !important;
  }

  html[data-theme="dark"] body.lightgold .quiz-options {
    background: #2d240f !important;
    border: 1px solid #e3d2a2 !important;
  }

  html[data-theme="dark"] body.lightgold .quiz-options button,
  html[data-theme="dark"] body.lightgold .quiz-button {
    background: #2d240f !important;
    color: #e8ce98 !important;
    border: 2px solid #d4bc85 !important;
    box-shadow: 0 0 6px rgba(210, 190, 120, 0.12) inset !important;
  }

  html[data-theme="dark"] body.lightgold .quiz-options button:hover,
  html[data-theme="dark"] body.lightgold .quiz-button:hover {
    background: #3a2e14 !important;
    color: #fffbe8 !important;
    border-color: #bfa865 !important;
    box-shadow: 0 0 14px rgba(191, 162, 104, 0.3) !important;
  }
}