@layer tokens {
  /* ===================================================
     Obsidian Key Accent Theme – The Gnostic Key
     Version: 2.1 – All tokens marked !important
     =================================================== */

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

    /* Accents */
    --text-accent: #c3653f !important;
    --highlight: #ffc3a1 !important;
    --shadow-glow: rgba(255, 180, 140, 0.2) !important;
    --glyph-color: #ff8850 !important;
    --strong-text: #e2785e !important;
    --page-box-shadow: 0 0 25px rgba(255, 180, 140, 0.2) !important;
    --cite-color: #e2785e !important;
    --accent-page: #c3653f !important;
    --section-border: #ffc3a1 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #fff5ef 0%,
      #ffe2d0 30%,
      #ffd1b4 60%,
      #f8a272 85%,
      #c3653f 100%
    ) !important;
    --bg-gradient: var(--card-gradient) !important;

    /* Badge tokens */
    --badge-bg: rgba(255, 195, 161, 0.55) !important;
    --badge-text: #5e2f1b !important;
    --badge-border: rgba(195, 101, 63, 0.45) !important;
    --badge-shadow: 0 1px 4px rgba(255, 180, 140, 0.2) !important;

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

    /* Overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(255, 226, 208, 0.35),
      rgba(248, 162, 114, 0.35)
    ) !important;

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

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

  html[data-theme="light"] body.obsidian .section-block {
    background: linear-gradient(145deg, #ffe2d0 0%, #ffd1b4 60%, #f8a272 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 22px rgba(255, 180, 140, 0.18) !important;
  }

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

  html[data-theme="light"] body.obsidian .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 16px rgba(255, 180, 140, 0.15) !important;
  }

  html[data-theme="light"] body.obsidian .quiz-question,
  html[data-theme="light"] body.obsidian .quiz-prompt {
    background: linear-gradient(to right, #ffe2d0, #ffc3a1) !important;
    color: var(--text-accent) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 12px rgba(255, 180, 140, 0.15) !important;
  }

  html[data-theme="light"] body.obsidian .quiz-options {
    background: #fff5ef !important;
    border: 1px solid var(--section-border) !important;
  }

  html[data-theme="light"] body.obsidian .quiz-options button,
  html[data-theme="light"] body.obsidian .quiz-button {
    background: #ffe2d0 !important;
    color: var(--text-accent) !important;
    border: 2px solid var(--glyph-color) !important;
    box-shadow: 0 0 6px rgba(255, 180, 140, 0.15) inset !important;
  }

  html[data-theme="light"] body.obsidian .quiz-options button:hover,
  html[data-theme="light"] body.obsidian .quiz-button:hover {
    background: #ffc3a1 !important;
    color: #5e2f1b !important;
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 12px rgba(255, 120, 80, 0.3) !important;
  }

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

    /* Accents */
    --text-accent: #de6433 !important;
    --highlight: #f8a272 !important;
    --shadow-glow: rgba(255, 120, 80, 0.25) !important;
    --glyph-color: #ffa07a !important;
    --strong-text: #ffb190 !important;
    --page-box-shadow: 0 0 25px rgba(255, 120, 80, 0.25) !important;
    --cite-color: #ffb190 !important;
    --accent-page: #de6433 !important;
    --section-border: #f8a272 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #120704 0%,
      #2a100a 25%,
      #3e140a 50%,
      #702b1a 75%,
      #de6433 100%
    ) !important;
    --bg-gradient: var(--card-gradient) !important;

    /* Badge tokens */
    --badge-bg: rgba(222, 100, 51, 0.35) !important;
    --badge-text: #ffb190 !important;
    --badge-border: rgba(255, 120, 80, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(255, 120, 80, 0.25) !important;

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

    /* Overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(42, 16, 10, 0.35),
      rgba(112, 43, 26, 0.35)
    ) !important;

    --bg-primary: #120704 !important; /* deep ember-black tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;
  }

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

  html[data-theme="dark"] body.obsidian .section-block {
    background: linear-gradient(145deg, #2a100a 0%, #3e140a 50%, #702b1a 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 25px rgba(255, 120, 80, 0.25) !important;
  }

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

  html[data-theme="dark"] body.obsidian .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 20px rgba(255, 120, 80, 0.2) !important;
  }

  html[data-theme="dark"] body.obsidian .quiz-question,
  html[data-theme="dark"] body.obsidian .quiz-prompt {
    background: linear-gradient(to right, #3e140a, #702b1a) !important;
    color: #ffb190 !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 14px rgba(255, 120, 80, 0.2) !important;
  }

  html[data-theme="dark"] body.obsidian .quiz-options {
    background: #2a100a !important;
    border: 1px solid var(--accent-page) !important;
  }

  html[data-theme="dark"] body.obsidian .quiz-options button,
  html[data-theme="dark"] body.obsidian .quiz-button {
    background: #2a100a !important;
    color: #ffb190 !important;
    border: 2px solid var(--glyph-color) !important;
    box-shadow: 0 0 6px rgba(255, 120, 80, 0.12) inset !important;
  }

  html[data-theme="dark"] body.obsidian .quiz-options button:hover,
  html[data-theme="dark"] body.obsidian .quiz-button:hover {
    background: #3e140a !important;
    color: #fff1ec !important;
    border-color: var(--accent-page) !important;
    box-shadow: 0 0 14px rgba(255, 120, 80, 0.3) !important;
  }
}

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