@layer tokens {
/* ===================================================
   Gnostic Eye (Pillar: eye)
   Dark: Indigo Steel | Light: Azure Mist
   ================================================== */

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

  /* Accents */
  --text-accent: #7581b2 !important;   /* muted indigo steel */
  --highlight: #a6b4e3 !important;     /* soft violet mist */
  --shadow-glow: rgba(117, 129, 178, 0.3) !important;
  --glyph-color: #c5d1ff !important;   /* pale vision glow */
  --strong-text: #9aa7d3 !important;
  --cite-color: #9aa7d3 !important;
  --accent-page: #7581b2 !important;
  --section-border: #a6b4e3 !important;

  /* Gradients */
  --card-gradient: linear-gradient(
    145deg,
    #0e111a 0%,
    #1b2232 35%,
    #2d3650 65%,
    #5b6693 85%,
    #7581b2 100%
  ) !important;

  --bg-primary: #0e111a !important; /* solid indigo steel tone */
  --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
  background: var(--bg-primary) !important;

  /* Badges */
  --badge-bg: rgba(117, 129, 178, 0.35) !important;
  --badge-text: #c5d1ff !important;
  --badge-border: rgba(117, 129, 178, 0.35) !important;
  --badge-shadow: 0 1px 4px rgba(117, 129, 178, 0.2) !important;

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

  /* Overlay painter */
  --overlay-bg-gradient: linear-gradient(
    to right,
    rgba(27, 34, 50, 0.35),
    rgba(91, 102, 147, 0.35)
  ) !important;

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

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

html[data-theme="dark"] body.eye .section-block {
  background: linear-gradient(145deg, #1b2232 0%, #2d3650 60%, #5b6693 100%) !important;
  border-color: var(--section-border) !important;
  box-shadow: 0 0 25px rgba(117, 129, 178, 0.3) !important;
}

html[data-theme="dark"] body.eye .image-block {
  border: 1px solid var(--section-border) !important;
  box-shadow: 0 0 20px rgba(117, 129, 178, 0.25) !important;
}

html[data-theme="dark"] body.eye .quiz-question,
html[data-theme="dark"] body.eye .quiz-prompt {
  background: linear-gradient(to right, #1b2232, #2d3650) !important;
  color: #c5d1ff !important;
  border-left: 4px solid #7581b2 !important;
  box-shadow: 0 0 14px rgba(117, 129, 178, 0.3) !important;
}

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

html[data-theme="dark"] body.eye .quiz-options button,
html[data-theme="dark"] body.eye .quiz-button {
  background: #1b2232 !important;
  color: #c5d1ff !important;
  border: 2px solid #7581b2 !important;
  box-shadow: 0 0 6px rgba(117, 129, 178, 0.2) inset !important;
}

html[data-theme="dark"] body.eye .quiz-options button:hover,
html[data-theme="dark"] body.eye .quiz-button:hover {
  background: #2d3650 !important;
  color: #ffffff !important;
  border-color: #a6b4e3 !important;
  box-shadow: 0 0 14px rgba(117, 129, 178, 0.3) !important;
}

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

  /* Accents */
  --text-accent: #4d5e91 !important;   /* deep sky indigo */
  --highlight: #dbe3ff !important;     /* misty azure */
  --shadow-glow: rgba(210, 220, 255, 0.2) !important;
  --glyph-color: #7e90c9 !important;
  --strong-text: #55669b !important;
  --cite-color: #55669b !important;
  --accent-page: #94a3d5 !important;
  --section-border: #dbe3ff !important;

  /* Gradients */
  --card-gradient: linear-gradient(
    145deg,
    #f5f7fb 0%,
    #e4e9f8 30%,
    #d3dcf3 60%,
    #c0cae9 85%,
    #94a3d5 100%
  ) !important;

  --bg-primary: #f5f7fb !important; /* solid azure mist tone */
  --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
  background: var(--bg-primary) !important;

  /* Badges */
  --badge-bg: rgba(219, 227, 255, 0.6) !important;
  --badge-text: #4d5e91 !important;
  --badge-border: rgba(148, 163, 213, 0.45) !important;
  --badge-shadow: 0 1px 4px rgba(148, 163, 213, 0.2) !important;

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

  /* Overlay painter */
  --overlay-bg-gradient: linear-gradient(
    to right,
    rgba(219, 227, 255, 0.35),
    rgba(148, 163, 213, 0.35)
  ) !important;

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

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

html[data-theme="light"] body.eye .section-block {
  background: linear-gradient(145deg, #e4e9f8 0%, #d3dcf3 60%, #c0cae9 100%) !important;
  border-color: var(--section-border) !important;
  box-shadow: 0 0 22px rgba(210, 220, 255, 0.2) !important;
}

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

html[data-theme="light"] body.eye .quiz-question,
html[data-theme="light"] body.eye .quiz-prompt {
  background: linear-gradient(to right, #e4e9f8, #d3dcf3) !important;
  color: #4d5e91 !important;
  border-left: 4px solid #7e90c9 !important;
  box-shadow: 0 0 12px rgba(210, 220, 255, 0.2) !important;
}

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

html[data-theme="light"] body.eye .quiz-options button,
html[data-theme="light"] body.eye .quiz-button {
  background: #e4e9f8 !important;
  color: #4d5e91 !important;
  border: 2px solid #7e90c9 !important;
  box-shadow: 0 0 6px rgba(210, 220, 255, 0.2) inset !important;
}

html[data-theme="light"] body.eye .quiz-options button:hover,
html[data-theme="light"] body.eye .quiz-button:hover {
  background: #dbe3ff !important;
  color: #2f3a66 !important;
  border-color: #4d5e91 !important;
  box-shadow: 0 0 12px rgba(117, 129, 178, 0.25) !important;
}
}

/* ===================================================
   Kill all 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;
}