@layer tokens {
  /* ===================================================
     Obsidian Key (Pillar: obsidian)
     Light: Parchment Ember | Dark: Ember Black
     Version: 2.2 – Painter-safe, parity tokens, cleaned
     Notes:
     - Does not set background on body directly (painter handles it)
     - Keeps bg-gradient aligned to overlay gradient for consistency
     - Removes duplicate bg-gradient assignments
     - Do not zero body::before here
     =================================================== */

  /* =========================
     LIGHT THEME
     ========================= */
  html[data-theme="light"] body.obsidian {
    /* Core */
    --bg-opacity: 0.30 !important;

    --bg-primary: #f8efe6 !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #f1dcc8 !important;
    --bg-wash: rgba(255, 255, 255, 0.90) !important;

    --text-primary: #24160f !important;
    --text-secondary: #553b2f !important;
    --text-muted: #6a4f41 !important;

    /* Accents */
    --text-accent: #c25a24 !important;
    --accent: var(--text-accent) !important;
    --accent-page: #d7662a !important;

    --highlight: #f5be86 !important;
    --shadow-glow: rgba(255, 178, 112, 0.34) !important;

    --glyph-color: #ef8440 !important;
    --strong-text: #d86230 !important;
    --cite-color: #ce5828 !important;

    /* Sections and surfaces */
    --section-bg-top: #f1dcc8 !important;
    --section-bg-bottom: #e7c4a2 !important;
    --section-border: #ffb97f !important;
    --section-subtitle-color: var(--text-secondary) !important;

    --bg-surface: var(--bg-primary) !important;
    --bg-alt: #f3e6d8 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #f9efe6 0%,
      #f1d8c2 28%,
      #e4be98 56%,
      #d5793f 82%,
      #a8481b 100%
    ) !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(241, 220, 200, 0.35),
      rgba(223, 138, 79, 0.35)
    ) !important;

    --bg-gradient: var(--overlay-bg-gradient) !important;

    /* Badges */
    --badge-bg: rgba(255, 183, 128, 0.62) !important;
    --badge-text: #4e220f !important;
    --badge-border: rgba(176, 78, 32, 0.48) !important;
    --badge-shadow: 0 1px 7px rgba(255, 178, 112, 0.30) !important;

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

    /* Links */
    --link-color: var(--text-accent) !important;
    --link-hover: var(--highlight) !important;

    /* Shadows */
    --page-box-shadow: 0 0 24px rgba(255, 178, 112, 0.28) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.08) !important;
  }

  html[data-theme="light"] body.obsidian .site-header,
  html[data-theme="light"] body.obsidian .site-footer {
    background: linear-gradient(to bottom, #f9efe6, #f1d8c2) !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, #f1d8c2 0%, #e4be98 60%, #d5793f 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !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, #f1d8c2, #ffbf85) !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: #f8efe6 !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: #f1d8c2 !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: #ffbf85 !important;
    color: #5a2612 !important;
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 12px rgba(255, 120, 80, 0.30) !important;
  }

  /* =========================
     DARK THEME
     ========================= */
  html[data-theme="dark"] body.obsidian {
    /* Core */
    --bg-opacity: 0.95 !important;

    --bg-primary: #25120a !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #24100a !important;
    --bg-wash: rgba(12, 10, 9, 0.92) !important;

    --text-primary: #f2dfcf !important;
    --text-secondary: #c39f85 !important;
    --text-muted: #9b765e !important;

    /* Accents */
    --text-accent: #e05a20 !important;
    --accent: var(--text-accent) !important;
    --accent-page: #eb6a26 !important;

    --highlight: #ffb579 !important;
    --shadow-glow: rgba(255, 146, 86, 0.38) !important;

    --glyph-color: #ff8a45 !important;
    --strong-text: #ffb06a !important;
    --cite-color: #f3a65d !important;

    /* Sections and surfaces */
    --section-bg-top: #24100a !important;
    --section-bg-bottom: #36150b !important;
    --section-border: #ffa86a !important;
    --section-subtitle-color: var(--text-secondary) !important;

    --bg-surface: rgba(12, 9, 7, 0.88) !important;
    --bg-alt: rgba(20, 14, 10, 0.94) !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #0f0704 0%,
      #22100a 25%,
      #32140b 50%,
      #512014 75%,
      #c94f20 100%
    ) !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(36, 16, 10, 0.35),
      rgba(90, 37, 22, 0.35)
    ) !important;

    --bg-gradient: var(--overlay-bg-gradient) !important;

    /* Badges */
    --badge-bg: rgba(201, 79, 32, 0.44) !important;
    --badge-text: #ffbf80 !important;
    --badge-border: rgba(255, 146, 86, 0.42) !important;
    --badge-shadow: 0 1px 7px rgba(255, 146, 86, 0.36) !important;

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

    /* Links */
    --link-color: var(--text-accent) !important;
    --link-hover: var(--highlight) !important;

    /* Shadows */
    --page-box-shadow: 0 0 28px rgba(255, 146, 86, 0.34) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.30) !important;
  }

  html[data-theme="dark"] body.obsidian .site-header,
  html[data-theme="dark"] body.obsidian .site-footer {
    background: linear-gradient(to bottom, #0f0704, #22100a) !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, #22100a 0%, #32140b 50%, #512014 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !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.20) !important;
  }

  html[data-theme="dark"] body.obsidian .quiz-question,
  html[data-theme="dark"] body.obsidian .quiz-prompt {
    background: linear-gradient(to right, #32140b, #512014) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 14px rgba(255, 120, 80, 0.20) !important;
  }

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

  html[data-theme="dark"] body.obsidian .quiz-options button,
  html[data-theme="dark"] body.obsidian .quiz-button {
    background: #22100a !important;
    color: var(--strong-text) !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: #32140b !important;
    color: #fff1ec !important;
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 14px rgba(255, 120, 80, 0.30) !important;
  }
}