@layer tokens {
  
  /* ===================================================
     The Vault (Pillar: vault)
     Dark: Stone Archive | Light: Dust of Memory
     Version: 2.2 — Fully aligned with Lightgold template
     =================================================== */

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

    /* Accents */
    --text-accent: #918c84 !important;  /* soft stone grey */
    --highlight: #c6bfa8 !important;
    --shadow-glow: rgba(150, 140, 120, 0.3) !important;
    --glyph-color: #e5ddcc !important;
    --strong-text: #ada38b !important;
    --cite-color: #ada38b !important;
    --accent-page: #918c84 !important;
    --section-border: #c6bfa8 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #1a1a18 0%,
      #2b2b28 30%,
      #3d3a35 55%,
      #5c5548 80%,
      #918c84 100%
    ) !important;

    --bg-primary: #1e1d1b !important; /* deep stone-black tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */

    background: var(--bg-primary) !important; /* apply solid */

    /* Badges */
    --badge-bg: rgba(145, 140, 132, 0.25) !important;
    --badge-text: #e5ddcc !important;
    --badge-border: rgba(145, 140, 132, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(145, 140, 132, 0.2) !important;

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

    /* Overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(43, 43, 40, 0.35),
      rgba(92, 85, 72, 0.35)
    ) !important;

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

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

  html[data-theme="dark"] body.vault .section-block {
    background: linear-gradient(145deg, #2b2b28 0%, #3d3a35 50%, #5c5548 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 25px rgba(150, 140, 120, 0.25) !important;
  }

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

  html[data-theme="dark"] body.vault .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 20px rgba(150, 140, 120, 0.2) !important;
  }

  html[data-theme="dark"] body.vault .quiz-question,
  html[data-theme="dark"] body.vault .quiz-prompt {
    background: linear-gradient(to right, #2b2b28, #3d3a35) !important;
    color: var(--glyph-color) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 12px rgba(150, 140, 120, 0.3) !important;
  }

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

  html[data-theme="dark"] body.vault .quiz-options button,
  html[data-theme="dark"] body.vault .quiz-button {
    background: #2b2b28 !important;
    color: var(--glyph-color) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px rgba(150, 140, 120, 0.15) inset !important;
  }

  html[data-theme="dark"] body.vault .quiz-options button:hover,
  html[data-theme="dark"] body.vault .quiz-button:hover {
    background: #3d3a35 !important;
    color: #fffaf0 !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 12px rgba(230, 215, 190, 0.3) !important;
  }

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

    /* Accents */
    --text-accent: #5e5a53 !important;   /* slate clay */
    --highlight: #7e7a6e !important;
    --shadow-glow: rgba(230, 215, 190, 0.15) !important;
    --glyph-color: #b7a897 !important;
    --strong-text: #6b6559 !important;
    --cite-color: #6b6559 !important;
    --accent-page: #a89e8c !important;
    --section-border: #e6dfc5 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #fefdf9 0%,
      #f2eee2 30%,
      #e6dfc5 55%,
      #d2c7a9 80%,
      #a89e8c 100%
    ) !important;

    --bg-primary: #f8f6f1 !important; /* parchment cream tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */

    background: var(--bg-primary) !important; /* apply solid */

    /* Badges */
    --badge-bg: rgba(230, 215, 190, 0.35) !important;
    --badge-text: #5e5a53 !important;
    --badge-border: rgba(168, 158, 140, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(168, 158, 140, 0.15) !important;

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

    /* Overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(242, 238, 226, 0.35),
      rgba(210, 199, 169, 0.35)
    ) !important;

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

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

  html[data-theme="light"] body.vault .section-block {
    background: linear-gradient(145deg, #f2eee2 0%, #e6dfc5 60%, #d2c7a9 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 20px rgba(230, 215, 190, 0.15) !important;
  }

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

  html[data-theme="light"] body.vault .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 16px rgba(230, 215, 190, 0.15) !important;
  }

  html[data-theme="light"] body.vault .quiz-question,
  html[data-theme="light"] body.vault .quiz-prompt {
    background: linear-gradient(to right, #f2eee2, #e6dfc5) !important;
    color: var(--text-accent) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 10px rgba(230, 215, 190, 0.15) !important;
  }

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

  html[data-theme="light"] body.vault .quiz-options button,
  html[data-theme="light"] body.vault .quiz-button {
    background: #f2eee2 !important;
    color: var(--text-accent) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px rgba(230, 215, 190, 0.12) inset !important;
  }

  html[data-theme="light"] body.vault .quiz-options button:hover,
  html[data-theme="light"] body.vault .quiz-button:hover {
    background: #e6dfc5 !important;
    color: #3c3934 !important;
    border-color: var(--accent-page) !important;
    box-shadow: 0 0 12px rgba(150, 140, 120, 0.25) !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;
  }
}