@layer tokens {

  /* ===================================================
     TGK Shop (Pillar: shop)
     Dark: Dusky Apricot | Light: Apricot Bloom
     Version: 2.1 — Full token set
     =================================================== */

  /* ===== Shared Custom Glows ===== */
  :root body.shop {
    --glow-apricot: rgba(247, 230, 196, 0.25) !important;
    --glow-aqua: rgba(174, 220, 211, 0.25) !important;
    --glow-aqua-soft: rgba(174, 220, 211, 0.15) !important;
  }

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

    /* Accents */
    --text-accent: #f7e6c4 !important;
    --highlight: #f5d8af !important;     /* warm apricot-gold glow (fixed) */
    --glyph-color: #ffedd5 !important;
    --shadow-glow: var(--glow-apricot) !important;
    --strong-text: #f9d8ac !important;
    --cite-color: #dab894 !important;
    --accent-page: #eac39b !important;
    --section-border: #f6d8b2 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #1b1511 0%,
      #2e2219 30%,
      #48321f 60%,
      #5e4330 85%,
      #f7e6c4 100%
    ) !important;

    --bg-primary: #1b1511 !important; /* deep dusky apricot tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;

    /* Badge tokens */
    --badge-bg: rgba(247, 230, 196, 0.25) !important;
    --badge-text: #f9d8ac !important;
    --badge-border: rgba(234, 195, 155, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(247, 230, 196, 0.15) !important;

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

    /* Overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(36, 28, 22, 0.35),
      rgba(81, 65, 45, 0.35)
    ) !important;

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

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

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

    /* Accents */
    --text-accent: #ac6839 !important;
    --highlight: #7b6d5c !important;
    --glyph-color: #dc9c61 !important;
    --shadow-glow: var(--glow-aqua-soft) !important;
    --strong-text: #ac6839 !important;
    --cite-color: #9c6b4e !important;
    --accent-page: #dc9c61 !important;
    --section-border: #f5ddc0 !important;

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #fffdf9 0%,
      #fdf3e4 30%,
      #f9e5c6 60%,
      #f5d5a9 85%,
      #dc9c61 100%
    ) !important;

    --bg-primary: #1b1511 !important; /* deep dusky apricot tone */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;

    /* Badge tokens */
    --badge-bg: rgba(245, 221, 192, 0.55) !important;
    --badge-text: #ac6839 !important;
    --badge-border: rgba(220, 156, 97, 0.35) !important;
    --badge-shadow: 0 1px 4px rgba(174, 220, 211, 0.12) !important;

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

    /* Overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(255, 250, 236, 0.35),
      rgba(245, 213, 169, 0.35)
    ) !important;

    --bg-primary: #fffdf9 !important; /* soft apricot bloom base */
    --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
    background: var(--bg-primary) !important;
  }

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

  /* ======= SHARED ELEMENTS ======= */

  /* Headers / Footers */
  html[data-theme="dark"] body.shop .site-header,
  html[data-theme="dark"] body.shop .site-footer {
    background: linear-gradient(to bottom, #181210, #3a2a22) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

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

  /* Section Blocks */
  html[data-theme="dark"] body.shop .section-block {
    background: linear-gradient(145deg, #2e2219 0%, #48321f 60%, #5e4330 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 22px var(--glow-apricot) !important;
  }

  html[data-theme="light"] body.shop .section-block {
    background: linear-gradient(145deg, #fdf3e4 0%, #f9e5c6 60%, #f5d5a9 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: 0 0 18px var(--glow-aqua-soft) !important;
  }

  /* Image Blocks */
  html[data-theme="dark"] body.shop .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 18px var(--glow-aqua-soft) !important;
  }

  html[data-theme="light"] body.shop .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 16px var(--glow-aqua-soft) !important;
  }

  /* Quiz Blocks */
  html[data-theme="dark"] body.shop .quiz-question,
  html[data-theme="dark"] body.shop .quiz-prompt {
    background: linear-gradient(to right, #2e2219, #5e4330) !important;
    color: var(--glyph-color) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 12px var(--glow-apricot) !important;
  }

  html[data-theme="light"] body.shop .quiz-question,
  html[data-theme="light"] body.shop .quiz-prompt {
    background: linear-gradient(to right, #fdf3e4, #f5d5a9) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--accent-page) !important;
    box-shadow: 0 0 10px var(--glow-aqua-soft) !important;
  }

  html[data-theme="dark"] body.shop .quiz-options,
  html[data-theme="light"] body.shop .quiz-options {
    background: var(--bg-gradient) !important;
    border: 1px solid var(--section-border) !important;
  }

  html[data-theme="dark"] body.shop .quiz-options button,
  html[data-theme="dark"] body.shop .quiz-button {
    background: #2e2219 !important;
    color: var(--glyph-color) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px var(--glow-apricot) inset !important;
  }

  html[data-theme="light"] body.shop .quiz-options button,
  html[data-theme="light"] body.shop .quiz-button {
    background: #fffdf9 !important;
    color: var(--strong-text) !important;
    border: 2px solid var(--accent-page) !important;
    box-shadow: 0 0 6px var(--glow-aqua-soft) inset !important;
  }

  html[data-theme="dark"] body.shop .quiz-options button:hover,
  html[data-theme="dark"] body.shop .quiz-button:hover {
    background: #5e4330 !important;
    color: #fffbe8 !important;
    border-color: var(--accent-page) !important;
    box-shadow: 0 0 14px var(--glow-apricot) !important;
  }

  html[data-theme="light"] body.shop .quiz-options button:hover,
  html[data-theme="light"] body.shop .quiz-button:hover {
    background: var(--highlight) !important;
    color: #3a2c0e !important;
    border-color: var(--accent-page) !important;
    box-shadow: 0 0 12px var(--glow-aqua) !important;
  }
}