@layer tokens {
  /* ===================================================
     Gnostic Eye (Pillar: eye)
     Dark: indigo Steel | Light: Azure Mist
     Version: 1.1 – 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 background declarations
     - Leaves global body::before alone (do not zero it here)
     =================================================== */

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

    --bg-primary: #0b0f19 !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #182135 !important;
    --bg-wash: rgba(18, 18, 18, 0.92) !important;

    --text-primary: #eceaf4 !important;
    --text-secondary: #afb5cc !important;
    --text-muted: #8b93ad !important;

    /* Accents */
    --text-accent: #7b88c5 !important;
    --accent: var(--text-accent) !important;
    --accent-page: #8e9cde !important;

    --highlight: #b8c5ff !important;
    --shadow-glow: rgba(122, 141, 198, 0.34) !important;

    --glyph-color: #c5d1ff !important;
    --strong-text: #9fafe6 !important;
    --cite-color: #98a9df !important;

    /* Sections and surfaces */
    --section-bg-top: #182135 !important;
    --section-bg-bottom: #27324b !important;
    --section-border: #b7c7ff !important;
    --section-subtitle-color: var(--text-secondary) !important;

    --bg-surface: rgba(12, 14, 20, 0.88) !important;
    --bg-alt: rgba(18, 22, 34, 0.94) !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #0b0f19 0%,
      #182135 35%,
      #27324b 65%,
      #4b5b8e 85%,
      #6f83c4 100%
    ) !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(24, 33, 53, 0.35),
      rgba(75, 91, 142, 0.35)
    ) !important;

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

    /* Badges */
    --badge-bg: rgba(122, 141, 198, 0.40) !important;
    --badge-text: #c2ceff !important;
    --badge-border: rgba(122, 141, 198, 0.40) !important;
    --badge-shadow: 0 1px 6px rgba(122, 141, 198, 0.26) !important;

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

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

    /* Shadows */
    --page-box-shadow: 0 0 26px rgba(122, 141, 198, 0.34) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.30) !important;
  }

  html[data-theme="dark"] body.indigo .site-header,
  html[data-theme="dark"] body.indigo .site-footer {
    background: linear-gradient(to bottom, #0b0f19, #182135) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="dark"] body.indigo .section-block {
    background: linear-gradient(145deg, #182135 0%, #27324b 60%, #4b5b8e 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

  html[data-theme="dark"] body.indigo .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 22px rgba(122, 141, 198, 0.30) !important;
  }

  html[data-theme="dark"] body.indigo .quiz-question,
  html[data-theme="dark"] body.indigo .quiz-prompt {
    background: linear-gradient(to right, #182135, #27324b) !important;
    color: var(--glyph-color) !important;
    border-left: 4px solid var(--text-accent) !important;
    box-shadow: 0 0 14px rgba(117, 129, 178, 0.30) !important;
  }

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

  html[data-theme="dark"] body.indigo .quiz-options button,
  html[data-theme="dark"] body.indigo .quiz-button {
    background: #182135 !important;
    color: var(--glyph-color) !important;
    border: 2px solid var(--text-accent) !important;
    box-shadow: 0 0 6px rgba(117, 129, 178, 0.20) inset !important;
  }

  html[data-theme="dark"] body.indigo .quiz-options button:hover,
  html[data-theme="dark"] body.indigo .quiz-button:hover {
    background: #27324b !important;
    color: #ffffff !important;
    border-color: var(--highlight) !important;
    box-shadow: 0 0 14px rgba(117, 129, 178, 0.30) !important;
  }

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

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

    --text-primary: #181a24 !important;
    --text-secondary: #434c67 !important;
    --text-muted: #596485 !important;

    /* Accents */
    --text-accent: #5063ad !important;
    --accent: var(--text-accent) !important;
    --accent-page: #8799de !important;

    --highlight: #d4dcff !important;
    --shadow-glow: rgba(164, 180, 230, 0.26) !important;

    --glyph-color: #7387d4 !important;
    --strong-text: #4b5fa8 !important;
    --cite-color: #43569a !important;

    /* Sections and surfaces */
    --section-bg-top: #dde4f6 !important;
    --section-bg-bottom: #ccd6f0 !important;
    --section-border: #d7e1ff !important;
    --section-subtitle-color: var(--text-secondary) !important;

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

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #f1f4fb 0%,
      #dde4f6 30%,
      #ccd6f0 60%,
      #b6c5e8 85%,
      #8ea2dc 100%
    ) !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(215, 225, 255, 0.35),
      rgba(142, 162, 220, 0.35)
    ) !important;

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

    /* Badges */
    --badge-bg: rgba(210, 223, 255, 0.64) !important;
    --badge-text: #3b4d91 !important;
    --badge-border: rgba(142, 162, 220, 0.48) !important;
    --badge-shadow: 0 1px 6px rgba(142, 162, 220, 0.24) !important;

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

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

    /* Shadows */
    --page-box-shadow: 0 0 24px rgba(164, 180, 230, 0.26) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.08) !important;
  }

  html[data-theme="light"] body.indigo .site-header,
  html[data-theme="light"] body.indigo .site-footer {
    background: linear-gradient(to bottom, #f1f4fb, #dde4f6) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="light"] body.indigo .section-block {
    background: linear-gradient(145deg, #dde4f6 0%, #ccd6f0 60%, #b6c5e8 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

  html[data-theme="light"] body.indigo .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 20px rgba(164, 180, 230, 0.20) !important;
  }

  html[data-theme="light"] body.indigo .quiz-question,
  html[data-theme="light"] body.indigo .quiz-prompt {
    background: linear-gradient(to right, #dde4f6, #ccd6f0) !important;
    color: var(--text-accent) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 12px rgba(210, 220, 255, 0.20) !important;
  }

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

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

  html[data-theme="light"] body.indigo .quiz-options button:hover,
  html[data-theme="light"] body.indigo .quiz-button:hover {
    background: #d7e1ff !important;
    color: #2f3b66 !important;
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 12px rgba(117, 129, 178, 0.25) !important;
  }

}