@layer tokens {

  /* ===================================================
     The Keymaker’s Dream (Pillar: dream)
     Dark: Rose Quartz Reverie | Light: Petal Mist Memory
     Version: 2.2 — Fully aligned with Lightgold template
     =================================================== */

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

    /* Accents */
    --text-accent: #8c4670 !important;   /* deep rose */
    --highlight: #f9e3ef !important;     /* petal glow */
    --shadow-glow: rgba(192, 107, 155, 0.12) !important;
    --glyph-color: #c06b9b !important;
    --strong-text: #6c2e52 !important;
    --cite-color: #a25d85 !important;
    --accent-page: #b56b97 !important;
    --section-border: #f3d4e6 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #fffafd 0%,
      #fdeff6 30%,
      #f7ddeb 60%,
      #eec4dc 85%,
      #c06b9b 100%
    ) !important;

    --bg-primary: #fdeff6 !important; /* flat petal mist tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;

    /* Badges */
    --badge-bg: rgba(243, 212, 230, 0.55) !important;
    --badge-text: #8c4670 !important;
    --badge-border: rgba(192, 107, 155, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(192, 107, 155, 0.15) !important;

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

    /* Overlay painter */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(255, 250, 253, 0.92),
      rgba(255, 235, 245, 0.88),
      rgba(255, 240, 248, 0.85)
    ) !important;

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

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

  html[data-theme="light"] body.dream .section-block {
    background: linear-gradient(145deg, #fdeff6 0%, #f7ddeb 60%, #eec4dc 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 18px rgba(192, 107, 155, 0.12) !important;
  }

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

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

  html[data-theme="light"] body.dream .quiz-question,
  html[data-theme="light"] body.dream .quiz-prompt {
    background: linear-gradient(to right, #fdeff6, #f7ddeb) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 10px rgba(192, 107, 155, 0.18) !important;
  }

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

  html[data-theme="light"] body.dream .quiz-options button,
  html[data-theme="light"] body.dream .quiz-button {
    background: #fffafd !important;
    color: var(--text-accent) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px rgba(192, 107, 155, 0.1) inset !important;
  }

  html[data-theme="light"] body.dream .quiz-options button:hover,
  html[data-theme="light"] body.dream .quiz-button:hover {
    background: #eec4dc !important;
    color: #4e2a3d !important;
    border-color: var(--highlight) !important;
    box-shadow: 0 0 12px rgba(192, 107, 155, 0.2) !important;
  }

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

    /* Accents */
    --text-accent: #d08fb3 !important;   /* rose quartz */
    --highlight: #f1c6dd !important;     /* glowing blush */
    --shadow-glow: rgba(208, 143, 179, 0.25) !important;
    --glyph-color: #ffd8ec !important;
    --strong-text: #f4c9dc !important;
    --cite-color: #e4a5c4 !important;
    --accent-page: #d08fb3 !important;
    --section-border: #f1c6dd !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #140e14 0%,
      #221626 35%,
      #3a2340 65%,
      #6a3a6f 85%,
      #d08fb3 100%
    ) !important;

    --bg-primary: #1c111e !important; /* deep rose-violet tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;

    /* Badges */
    --badge-bg: rgba(208, 143, 179, 0.25) !important;
    --badge-text: #f4c9dc !important;
    --badge-border: rgba(208, 143, 179, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(208, 143, 179, 0.2) !important;

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

    /* Overlay painter */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(20, 14, 20, 0.92),
      rgba(34, 22, 38, 0.88),
      rgba(58, 35, 64, 0.85)
    ) !important;

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

  /* Component overrides – dark */
  html[data-theme="dark"] body.dream .site-header,
  html[data-theme="dark"] body.dream .site-footer {
    background: linear-gradient(to bottom, #100a10, #2c1a2f) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="dark"] body.dream .section-block {
    background: linear-gradient(145deg, #221626 0%, #3a2340 60%, #6a3a6f 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 25px rgba(208, 143, 179, 0.2) !important;
  }

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

  html[data-theme="dark"] body.dream .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 20px rgba(208, 143, 179, 0.15) !important;
  }

  html[data-theme="dark"] body.dream .quiz-question,
  html[data-theme="dark"] body.dream .quiz-prompt {
    background: linear-gradient(to right, #221626, #3a2340) !important;
    color: var(--glyph-color) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 12px rgba(240, 160, 200, 0.2) !important;
  }

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

  html[data-theme="dark"] body.dream .quiz-options button,
  html[data-theme="dark"] body.dream .quiz-button {
    background: #140e14 !important;
    color: var(--strong-text) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px rgba(240, 160, 200, 0.15) inset !important;
  }

  html[data-theme="dark"] body.dream .quiz-options button:hover,
  html[data-theme="dark"] body.dream .quiz-button:hover {
    background: #6a3a6f !important;
    color: #fff0f7 !important;
    border-color: var(--highlight) !important;
    box-shadow: 0 0 14px rgba(240, 160, 200, 0.3) !important;
  }

  /* ✦ Global kill overlays */
  html[data-theme="light"] body::before,
  html[data-theme="dark"] body::before {
    --overlay-bg-gradient: none !important;
    --overlay-img: none !important;
    opacity: 0 !important;
  }
}