@layer tokens {
    /* ===================================================
      TGK Community (Pillar: community)
      Dark: Aquatic Glow | Light: Coastal Calm
      Version: 2.1 – All tokens marked !important
      =================================================== */

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

      /* Accents */
      --text-accent: #88d8d2 !important;
      --highlight: #c4f4ef !important;
      --glyph-color: #dffefc !important;
      --shadow-glow: rgba(136, 216, 210, 0.25) !important;
      --strong-text: #b3f2ec !important;
      --cite-color: #98e2dc !important;
      --accent-page: #6fcac5 !important;
      --section-border: #b5ede7 !important;

      /* Gradients */
      --card-gradient: linear-gradient(
        145deg,
        #0a1111 0%,
        #132224 35%,
        #1c373a 65%,
        #296265 85%,
        #88d8d2 100%
      ) !important;
      --bg-gradient: var(--card-gradient) !important;

      /* Badge tokens */
      --badge-bg: rgba(136, 216, 210, 0.35) !important;
      --badge-text: #dffefc !important;
      --badge-border: rgba(136, 216, 210, 0.35) !important;
      --badge-shadow: 0 1px 4px rgba(136, 216, 210, 0.2) !important;

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

      /* Overlay */
      --overlay-bg-gradient: linear-gradient(
        to right,
        rgba(5, 20, 20, 0.92),
        rgba(20, 40, 40, 0.88),
        rgba(41, 98, 101, 0.85)
      ) !important;

      --bg-primary: #0a1111 !important; /* deep aquatic indigo-green */
      --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
      background: var(--bg-primary) !important;
    }

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

    html[data-theme="dark"] body.community .section-block {
      background: linear-gradient(145deg, #132224 0%, #1c373a 60%, #296265 100%) !important;
      border-color: var(--section-border) !important;
      box-shadow: 0 0 25px rgba(136, 216, 210, 0.2) !important;
    }

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

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

    html[data-theme="dark"] body.community .quiz-question,
    html[data-theme="dark"] body.community .quiz-prompt {
      background: linear-gradient(to right, #0a1111, #1c373a) !important;
      color: var(--glyph-color) !important;
      border-left: 4px solid var(--accent-page) !important;
      box-shadow: 0 0 12px rgba(136, 216, 210, 0.25) !important;
    }

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

    html[data-theme="dark"] body.community .quiz-options button,
    html[data-theme="dark"] body.community .quiz-button {
      background: #0a1111 !important;
      color: var(--strong-text) !important;
      border: 2px solid var(--accent-page) !important;
      box-shadow: 0 0 6px rgba(136, 216, 210, 0.15) inset !important;
    }

    html[data-theme="dark"] body.community .quiz-options button:hover,
    html[data-theme="dark"] body.community .quiz-button:hover {
      background: #296265 !important;
      color: #ffffff !important;
      border-color: var(--highlight) !important;
      box-shadow: 0 0 14px rgba(136, 216, 210, 0.25) !important;
    }

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

      /* Accents */
      --text-accent: #276b67 !important;
      --highlight: #e8fbfa !important;
      --glyph-color: #3aa9a3 !important;
      --shadow-glow: rgba(107, 210, 204, 0.12) !important;
      --strong-text: #1f4e4a !important;
      --cite-color: #4d9894 !important;
      --accent-page: #57b1ac !important;
      --section-border: #cfeeed !important;

      /* Gradients */
      --card-gradient: linear-gradient(
        145deg,
        #f8fefe 0%,
        #eaf9f8 30%,
        #d9f3f1 60%,
        #c4ece9 85%,
        #9adfdc 100%
      ) !important;

      --bg-primary: #f8fefe !important; /* coastal calm mint-white */
      --bg-gradient: var(--bg-primary) !important; /* flatten gradient */
      background: var(--bg-primary) !important;

      /* Badge tokens */
      --badge-bg: rgba(200, 235, 235, 0.55) !important;
      --badge-text: #1f4e4a !important;
      --badge-border: rgba(87, 177, 172, 0.45) !important;
      --badge-shadow: 0 1px 4px rgba(107, 210, 204, 0.12) !important;

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

      /* Overlay */
      --overlay-bg-gradient: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.85),
        rgba(224, 248, 248, 0.88),
        rgba(200, 235, 235, 0.85)
      ) !important;

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

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

    html[data-theme="light"] body.community .section-block {
      background: linear-gradient(145deg, #eaf9f8 0%, #d9f3f1 60%, #c4ece9 100%) !important;
      border-color: var(--section-border) !important;
      box-shadow: 0 0 20px rgba(107, 210, 204, 0.12) !important;
    }

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

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

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

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

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

    html[data-theme="light"] body.community .quiz-options button:hover,
    html[data-theme="light"] body.community .quiz-button:hover {
      background: #c4ece9 !important;
      color: #123030 !important;
      border-color: var(--highlight) !important;
      box-shadow: 0 0 12px rgba(107, 210, 204, 0.2) !important;
    }
  }

  /* Kill all overlay fallback images */
  html[data-theme="light"] body::before,
  html[data-theme="dark"] body::before {
    --overlay-bg-gradient: none !important;
    --overlay-img: none !important;
    opacity: 0 !important;
  }