@layer tokens {
  /* ===================================================
     Plum Wine Accent Theme — The Teachings
     Version: 1.0  Tokenised, painter-safe
     Notes:
     - Uses the painter (body::before) via --overlay-bg-gradient
     - Does not set body background directly
     - Deep plum wine palette for spiritual/contemplative content
     =================================================== */

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

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

    --text-primary: #1f0f14 !important;
    --text-secondary: #5c2a3a !important;
    --text-muted: #7a3d50 !important;

    /* Accents */
    --text-accent: #722F37 !important;
    --accent: var(--text-accent) !important;
    --accent-page: #8B3A4A !important;

    --highlight: #d4899a !important;
    --shadow-glow: rgba(180, 90, 110, 0.28) !important;

    --glyph-color: #8B3A4A !important;
    --strong-text: #6B2234 !important;
    --cite-color: #7A2E40 !important;

    /* Surfaces */
    --bg-alt: #e8d2d8 !important;
    --bg-surface: var(--bg-primary) !important;

    --card-gradient: linear-gradient(
      150deg,
      #f2e4e7 0%,
      #e3cdd2 26%,
      #c9a0ad 56%,
      #8B3A4A 82%,
      #5C2434 100%
    ) !important;

    /* Section defaults */
    --section-bg-top: #e3cdd2 !important;
    --section-bg-bottom: #c9a0ad !important;
    --section-border: rgba(114, 47, 55, 0.45) !important;
    --section-subtitle-color: var(--text-secondary) !important;

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

    /* Borders and helpers */
    --border-accent: rgba(139, 58, 74, 0.35) !important;
    --gold-border: rgba(139, 58, 74, 0.40) !important;
    --gold-tone: #8B3A4A !important;

    --soft-gold: #d4899a !important;
    --golden-blaze: #e8a8b6 !important;

    --accent-soft: rgba(139, 58, 74, 0.28) !important;
    --accent-soft-glow: rgba(139, 58, 74, 0.38) !important;
    --accent-glow: rgba(212, 137, 154, 0.68) !important;

    /* Shadows */
    --page-box-shadow: 0 0 18px rgba(139, 58, 74, 0.18) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.10) !important;
    --glow-soft: 0 10px 20px rgba(139, 58, 74, 0.22) !important;
    --glow-strong: 0 16px 28px rgba(139, 58, 74, 0.32) !important;

    --accent-gradient: linear-gradient(145deg, #d4899a, #722F37) !important;
    --text-base: var(--text-primary) !important;
    --bg: var(--bg-primary) !important;

    /* Inputs */
    --input-bg: #e8d2d8 !important;
    --input-bg-focus: #f2e0e5 !important;
    --input-border: rgba(31, 15, 20, 0.28) !important;
    --input-text: #1f0f14 !important;
    --input-placeholder: rgba(31, 15, 20, 0.55) !important;

    /* Badge tokens */
    --badge-bg: rgba(212, 137, 154, 0.78) !important;
    --badge-text: #4a1525 !important;
    --badge-border: rgba(114, 47, 55, 0.50) !important;
    --badge-shadow: 0 1px 6px rgba(139, 58, 74, 0.25) !important;

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

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(227, 205, 210, 0.35),
      rgba(201, 160, 173, 0.35)
    ) !important;

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

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

  html[data-theme="light"] body.plumwine .section-block {
    background: linear-gradient(
      145deg,
      #e3cdd2 0%,
      #c9a0ad 50%,
      rgba(139, 58, 74, 0.48) 100%
    ) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

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

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

  html[data-theme="light"] body.plumwine .quiz-question,
  html[data-theme="light"] body.plumwine .quiz-prompt {
    background: linear-gradient(to right, #eddce0, #e3cdd2) !important;
    color: var(--text-accent) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 12px rgba(180, 90, 110, 0.12) !important;
  }

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

  html[data-theme="light"] body.plumwine .quiz-options button,
  html[data-theme="light"] body.plumwine .quiz-button {
    background: #b07080 !important;
    color: #3a1020 !important;
    border: 2px solid var(--glyph-color) !important;
    box-shadow: 0 0 6px rgba(180, 90, 110, 0.15) inset !important;
  }

  html[data-theme="light"] body.plumwine .quiz-options button:hover,
  html[data-theme="light"] body.plumwine .quiz-button:hover {
    background: var(--highlight) !important;
    color: #1f0f14 !important;
    border-color: rgba(139, 58, 74, 0.85) !important;
    box-shadow: 0 0 12px rgba(139, 58, 74, 0.30) !important;
  }

  /* =========================
     DARK MODE
     ========================= */
  html[data-theme="dark"] body.plumwine {
    /* Core */
    --bg-opacity: 0.16 !important;

    --bg-primary: #0e0508 !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #1e0a10 !important;
    --bg-wash: rgba(10, 5, 7, 0.92) !important;

    --text-primary: #e8c5ce !important;
    --text-secondary: #c08a98 !important;
    --text-muted: #9a6878 !important;

    /* Accents */
    --text-accent: #c4707e !important;
    --accent: var(--text-accent) !important;
    --accent-page: #d4899a !important;

    --highlight: #e8a8b6 !important;
    --shadow-glow: rgba(196, 112, 126, 0.30) !important;

    --glyph-color: #d4899a !important;
    --strong-text: #e8a8b6 !important;
    --cite-color: #d4899a !important;

    /* Surfaces */
    --bg-alt: rgba(24, 10, 14, 0.94) !important;
    --bg-surface: rgba(12, 5, 8, 0.88) !important;

    --card-gradient: linear-gradient(
      150deg,
      #0e0508 0%,
      #1e0a10 24%,
      #2e1018 50%,
      #3e1620 74%,
      #722F37 100%
    ) !important;

    /* Section defaults */
    --section-bg-top: #1e0a10 !important;
    --section-bg-bottom: #2e1018 !important;
    --section-border: rgba(196, 112, 126, 0.55) !important;
    --section-subtitle-color: var(--text-secondary) !important;

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

    /* Borders and helpers */
    --border-accent: rgba(160, 80, 95, 0.45) !important;
    --gold-border: rgba(160, 80, 95, 0.45) !important;
    --gold-tone: #d4899a !important;

    --soft-gold: #d4899a !important;
    --golden-blaze: #e8a8b6 !important;

    --accent-soft: rgba(196, 112, 126, 0.22) !important;
    --accent-soft-glow: rgba(196, 112, 126, 0.32) !important;
    --accent-glow: rgba(232, 168, 182, 0.48) !important;

    /* Shadows */
    --page-box-shadow: 0 0 22px rgba(196, 112, 126, 0.20) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.30) !important;
    --glow-soft: 0 10px 22px rgba(196, 112, 126, 0.24) !important;
    --glow-strong: 0 16px 30px rgba(196, 112, 126, 0.34) !important;

    --accent-gradient: linear-gradient(145deg, #e8a8b6, #5C2434) !important;
    --text-base: var(--text-primary) !important;
    --bg: var(--bg-primary) !important;

    /* Inputs */
    --input-bg: #1e0a10 !important;
    --input-bg-focus: #2a1018 !important;
    --input-border: rgba(255, 255, 255, 0.20) !important;
    --input-text: #ecd0d8 !important;
    --input-placeholder: rgba(236, 208, 216, 0.62) !important;

    /* Badge tokens */
    --badge-bg: rgba(114, 47, 55, 0.45) !important;
    --badge-text: #d4899a !important;
    --badge-border: rgba(196, 112, 126, 0.45) !important;
    --badge-shadow: 0 1px 6px rgba(160, 80, 95, 0.28) !important;

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

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(30, 10, 16, 0.35),
      rgba(62, 22, 32, 0.35)
    ) !important;

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

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

  html[data-theme="dark"] body.plumwine .section-block {
    background: linear-gradient(145deg, #1e0a10 0%, #2e1018 50%, #3e1620 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

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

  html[data-theme="dark"] body.plumwine .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 18px rgba(196, 112, 126, 0.12) !important;
  }

  html[data-theme="dark"] body.plumwine .quiz-question,
  html[data-theme="dark"] body.plumwine .quiz-prompt {
    background: linear-gradient(to right, #2e1018, #3e1620) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 14px rgba(196, 112, 126, 0.15) !important;
  }

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

  html[data-theme="dark"] body.plumwine .quiz-options button,
  html[data-theme="dark"] body.plumwine .quiz-button {
    background: #1e0a10 !important;
    color: var(--strong-text) !important;
    border: 2px solid var(--glyph-color) !important;
    box-shadow: 0 0 6px rgba(196, 112, 126, 0.12) inset !important;
  }

  html[data-theme="dark"] body.plumwine .quiz-options button:hover,
  html[data-theme="dark"] body.plumwine .quiz-button:hover {
    background: #2e1018 !important;
    color: #fff0f3 !important;
    border-color: #b07080 !important;
    box-shadow: 0 0 14px rgba(160, 80, 95, 0.30) !important;
  }

  /* =========================
     Verify banner (both modes)
     ========================= */
  html[data-theme="light"] body.plumwine #verify-banner,
  html[data-theme="dark"] body.plumwine #verify-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--verify-banner-gap, 0.6rem);
    padding: var(--verify-banner-padding, 0.75rem 1rem);
    margin: var(--verify-banner-margin, 0 0 1rem 0);
    border-radius: var(--verify-banner-radius, 0.75rem);
    border: var(--verify-banner-border, 1px solid var(--section-border));
    background: var(--verify-banner-bg, var(--badge-bg));
    color: var(--verify-banner-text, var(--badge-text));
    box-shadow: var(--verify-banner-shadow, var(--badge-shadow));
    font-size: var(--verify-banner-font-size, 0.9rem);
    text-align: center;
    animation: fadeIn 0.4s ease-out forwards;
  }

  html[data-theme="light"] body.plumwine #verify-banner button,
  html[data-theme="dark"] body.plumwine #verify-banner button {
    background: var(--verify-btn-bg, var(--text-accent));
    color: var(--verify-btn-text, var(--bg-primary));
    border: var(--verify-btn-border, 1px solid var(--accent-page));
    border-radius: var(--verify-btn-radius, 0.5rem);
    padding: var(--verify-btn-padding, 0.35rem 0.75rem);
    cursor: pointer;
    font-weight: var(--verify-btn-weight, 500);
    transition: var(--verify-btn-transition, all 0.2s ease-in-out);
  }

  html[data-theme="light"] body.plumwine #verify-banner button:hover,
  html[data-theme="dark"] body.plumwine #verify-banner button:hover {
    background: var(--highlight);
    color: var(--text-primary);
    border-top-color: var(--strong-text);
    box-shadow: 0 0 10px var(--shadow-glow);
  }
}