@layer tokens {
  /* ===================================================
     Tyrian Purple Accent Theme
     Base hue: #6B0AC9
     Version: 1.0
     Notes:
     - Uses the existing accent token contract
     - Keeps painter overlay via --overlay-bg-gradient
     =================================================== */

  /* =========================
     DARK THEME
     ========================= */
  html[data-theme="dark"] body.tyrian-purple {
    --bg-opacity: 0.16 !important;

    --bg-primary: #12051f !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #220a3b !important;
    --bg-wash: rgba(9, 3, 17, 0.92) !important;

    --text-primary: #f3e9ff !important;
    --text-secondary: #cdb6ec !important;
    --text-muted: #a78dca !important;

    --text-accent: #b976ff !important;
    --accent: var(--text-accent) !important;
    --accent-page: #6b0ac9 !important;

    --highlight: #ddbaff !important;
    --shadow-glow: rgba(107, 10, 201, 0.32) !important;

    --glyph-color: #d7afff !important;
    --strong-text: #e5ccff !important;
    --cite-color: #cda6f7 !important;

    --section-bg-top: #220a3b !important;
    --section-bg-bottom: #34105b !important;
    --section-border: rgba(185, 118, 255, 0.48) !important;
    --section-subtitle-color: var(--text-secondary) !important;

    --bg-surface: rgba(14, 5, 25, 0.88) !important;
    --bg-alt: rgba(20, 8, 34, 0.94) !important;

    --card-gradient: linear-gradient(
      145deg,
      #12051f 0%,
      #220a3b 28%,
      #34105b 58%,
      #4e1590 82%,
      #6b0ac9 100%
    ) !important;

    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(34, 10, 59, 0.35),
      rgba(107, 10, 201, 0.30)
    ) !important;

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

    --badge-bg: rgba(107, 10, 201, 0.34) !important;
    --badge-text: #eddcff !important;
    --badge-border: rgba(185, 118, 255, 0.44) !important;
    --badge-shadow: 0 1px 6px rgba(107, 10, 201, 0.24) !important;

    --footer-opacity: 0.82 !important;

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

    --border-accent: rgba(185, 118, 255, 0.35) !important;
    --gold-border: rgba(185, 118, 255, 0.38) !important;
    --gold-tone: #c995ff !important;
    --soft-gold: #ddbaff !important;
    --golden-blaze: #f3e9ff !important;

    --accent-soft: rgba(107, 10, 201, 0.22) !important;
    --accent-soft-glow: rgba(107, 10, 201, 0.32) !important;
    --accent-glow: rgba(185, 118, 255, 0.42) !important;
    --accent-gradient: linear-gradient(145deg, #ddbaff, #6b0ac9) !important;

    --page-box-shadow: 0 0 24px rgba(107, 10, 201, 0.22) !important;
    --page-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.30) !important;
    --glow-soft: 0 10px 22px rgba(107, 10, 201, 0.24) !important;
    --glow-strong: 0 16px 30px rgba(107, 10, 201, 0.34) !important;

    --text-base: var(--text-primary) !important;
    --bg: var(--bg-primary) !important;

    --input-bg: #1a082d !important;
    --input-bg-focus: #2a0d48 !important;
    --input-border: rgba(255, 255, 255, 0.20) !important;
    --input-text: var(--text-primary) !important;
    --input-placeholder: rgba(243, 233, 255, 0.60) !important;
  }

  html[data-theme="dark"] body.tyrian-purple .site-header,
  html[data-theme="dark"] body.tyrian-purple .site-footer {
    background: linear-gradient(to bottom, #12051f, #220a3b) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="dark"] body.tyrian-purple .section-block {
    background: linear-gradient(145deg, #220a3b 0%, #34105b 58%, #4e1590 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

  html[data-theme="dark"] body.tyrian-purple .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 18px rgba(107, 10, 201, 0.18) !important;
  }

  html[data-theme="dark"] body.tyrian-purple .quiz-question,
  html[data-theme="dark"] body.tyrian-purple .quiz-prompt {
    background: linear-gradient(to right, #220a3b, #34105b) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 14px rgba(107, 10, 201, 0.16) !important;
  }

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

  html[data-theme="dark"] body.tyrian-purple .quiz-options button,
  html[data-theme="dark"] body.tyrian-purple .quiz-button {
    background: #220a3b !important;
    color: var(--strong-text) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px rgba(107, 10, 201, 0.16) inset !important;
  }

  html[data-theme="dark"] body.tyrian-purple .quiz-options button:hover,
  html[data-theme="dark"] body.tyrian-purple .quiz-button:hover {
    background: #34105b !important;
    color: #ffffff !important;
    border-color: var(--highlight) !important;
    box-shadow: 0 0 14px rgba(185, 118, 255, 0.24) !important;
  }

  /* =========================
     LIGHT THEME
     ========================= */
  html[data-theme="light"] body.tyrian-purple {
    --bg-opacity: 0.32 !important;

    --bg-primary: #fbf5ff !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #efe0fb !important;
    --bg-wash: rgba(255, 255, 255, 0.92) !important;

    --text-primary: #1f1230 !important;
    --text-secondary: #56367a !important;
    --text-muted: #77599c !important;

    --text-accent: #6b0ac9 !important;
    --accent: var(--text-accent) !important;
    --accent-page: #8b38dd !important;

    --highlight: #c995ff !important;
    --shadow-glow: rgba(107, 10, 201, 0.18) !important;

    --glyph-color: #8b38dd !important;
    --strong-text: #4d1d7d !important;
    --cite-color: #693399 !important;

    --section-bg-top: #efe0fb !important;
    --section-bg-bottom: #e2c6f8 !important;
    --section-border: rgba(107, 10, 201, 0.28) !important;
    --section-subtitle-color: var(--text-secondary) !important;

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

    --card-gradient: linear-gradient(
      145deg,
      #fbf5ff 0%,
      #efe0fb 30%,
      #e2c6f8 58%,
      #c995ff 84%,
      #8b38dd 100%
    ) !important;

    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(239, 224, 251, 0.40),
      rgba(201, 149, 255, 0.28)
    ) !important;

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

    --badge-bg: rgba(239, 224, 251, 0.82) !important;
    --badge-text: #4d1d7d !important;
    --badge-border: rgba(139, 56, 221, 0.38) !important;
    --badge-shadow: 0 1px 6px rgba(107, 10, 201, 0.14) !important;

    --footer-opacity: 0.94 !important;

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

    --border-accent: rgba(107, 10, 201, 0.24) !important;
    --gold-border: rgba(139, 56, 221, 0.28) !important;
    --gold-tone: #8b38dd !important;
    --soft-gold: #ddbaff !important;
    --golden-blaze: #f8f0ff !important;

    --accent-soft: rgba(107, 10, 201, 0.14) !important;
    --accent-soft-glow: rgba(107, 10, 201, 0.22) !important;
    --accent-glow: rgba(139, 56, 221, 0.28) !important;
    --accent-gradient: linear-gradient(145deg, #ddbaff, #8b38dd) !important;

    --page-box-shadow: 0 0 20px rgba(107, 10, 201, 0.12) !important;
    --page-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
    --glow-soft: 0 10px 20px rgba(107, 10, 201, 0.14) !important;
    --glow-strong: 0 16px 28px rgba(107, 10, 201, 0.20) !important;

    --text-base: var(--text-primary) !important;
    --bg: var(--bg-primary) !important;

    --input-bg: #f3e8fd !important;
    --input-bg-focus: #ffffff !important;
    --input-border: rgba(31, 18, 48, 0.18) !important;
    --input-text: var(--text-primary) !important;
    --input-placeholder: rgba(31, 18, 48, 0.52) !important;
  }

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

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

  html[data-theme="light"] body.tyrian-purple .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 16px rgba(107, 10, 201, 0.12) !important;
  }

  html[data-theme="light"] body.tyrian-purple .quiz-question,
  html[data-theme="light"] body.tyrian-purple .quiz-prompt {
    background: linear-gradient(to right, #f3e8fd, #efe0fb) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 12px rgba(107, 10, 201, 0.12) !important;
  }

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

  html[data-theme="light"] body.tyrian-purple .quiz-options button,
  html[data-theme="light"] body.tyrian-purple .quiz-button {
    background: #f3e8fd !important;
    color: var(--text-accent) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px rgba(107, 10, 201, 0.10) inset !important;
  }

  html[data-theme="light"] body.tyrian-purple .quiz-options button:hover,
  html[data-theme="light"] body.tyrian-purple .quiz-button:hover {
    background: #efe0fb !important;
    color: #2f174a !important;
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 12px rgba(107, 10, 201, 0.18) !important;
  }
}