@layer tokens {
  /* ===================================================
     TGK teal (Pillar: teal)
     Light: Coastal Calm | Dark: Aquatic Glow
     Version: 2.3 – Painter-safe, parity tokens, cleaned
     Notes:
     - Does not set background on body directly (painter handles it)
     - Keeps bg-gradient aligned to overlay gradient for consistency
     - Keeps readability overrides scoped to body.teal
     - Removes global body::before killer (do that once, centrally, not per pillar)
     =================================================== */

  /* =========================
     LIGHT THEME: Coastal Calm
     ========================= */
  html[data-theme="light"] body.teal {
    /* Core */
    --bg-opacity: 0.32 !important;

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

    --text-primary: #1a1a1a !important;
    --text-secondary: #3b4b4a !important;
    --text-muted: #556b6a !important;

    /* Accents */
    --text-accent: #0f6d7f !important;
    --accent: var(--text-accent) !important;
    --accent-page: #2fb4cc !important;

    --highlight: #d8f4f8 !important;
    --shadow-glow: rgba(79, 183, 178, 0.22) !important;

    --glyph-color: #1aa6be !important;
    --strong-text: #114e5d !important;
    --cite-color: #2b8294 !important;

    /* Sections */
    --section-bg-top: #d6ecef !important;
    --section-bg-bottom: #c2e3e8 !important;
    --section-border: #b6dce2 !important;
    --section-subtitle-color: var(--text-secondary) !important;

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

    /* Gradients */
    --card-gradient: linear-gradient(
      145deg,
      #eef8fa 0%,
      #d6ecef 30%,
      #c2e3e8 60%,
      #9fd3dc 85%,
      #6ab8c7 100%
    ) !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(238, 248, 250, 0.85),
      rgba(214, 236, 239, 0.88),
      rgba(182, 220, 226, 0.85)
    ) !important;

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

    /* Cards */
    --card-bg: #ffffff !important;
    --card-border: rgba(79, 183, 178, 0.28) !important;
    --card-shadow: 0 0 20px rgba(79, 183, 178, 0.18) !important;

    /* Buttons */
    --btn-bg: var(--bg-primary) !important;
    --btn-border: var(--accent-page) !important;
    --btn-text: var(--text-accent) !important;
    --btn-hover-bg: #bfe7e4 !important;
    --btn-hover-text: #0f2f2c !important;

    /* Form fields */
    --input-bg: #ffffff !important;
    --input-border: var(--section-border) !important;
    --input-text: var(--text-primary) !important;
    --input-placeholder: rgba(26, 26, 26, 0.5) !important;
    --input-focus-border: var(--accent-page) !important;
    --input-focus-shadow: 0 0 9px rgba(79, 183, 178, 0.40) !important;

    /* Badges */
    --badge-bg: rgba(189, 231, 228, 0.60) !important;
    --badge-text: #1b4c49 !important;
    --badge-border: rgba(79, 183, 178, 0.48) !important;
    --badge-shadow: 0 1px 6px rgba(79, 183, 178, 0.20) !important;

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

    /* Shadows */
    --page-box-shadow: 0 0 22px rgba(79, 183, 178, 0.18) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.08) !important;
  }

  /* Light component styling */
  html[data-theme="light"] body.teal .site-header,
  html[data-theme="light"] body.teal .site-footer {
    background: linear-gradient(to bottom, #f2fbfd, #d6ecef) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="light"] body.teal .section-block {
    background: linear-gradient(145deg, #d6ecef 0%, #c2e3e8 60%, #9fd3dc 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

  html[data-theme="light"] body.teal .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 18px rgba(79, 183, 178, 0.18) !important;
  }

  /* =========================
     DARK THEME: Aquatic Glow
     ========================= */
  html[data-theme="dark"] body.teal {
    /* Core */
    --bg-opacity: 0.14 !important;

    --bg-primary: #020a10 !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #08131d !important;
    --bg-wash: rgba(18, 18, 18, 0.92) !important;

    --text-primary: #f6fcfc !important;
    --text-secondary: #cde1e1 !important;
    --text-muted: #9bb1b1 !important;

    /* Accents */
    --text-accent: #6ed8eb !important;
    --accent: var(--text-accent) !important;
    --accent-page: #45cbe3 !important;

    --highlight: #b4f2fb !important;
    --shadow-glow: rgba(99, 208, 203, 0.26) !important;

    --glyph-color: #ddfbff !important;
    --strong-text: #57d2ea !important;
    --cite-color: #8ae3f1 !important;

    /* Sections */
    --section-bg-top: #08131d !important;
    --section-bg-bottom: #0b1d2a !important;
    --section-border: rgba(150, 220, 230, 0.48) !important;
    --section-subtitle-color: var(--text-secondary) !important;

    /* Surfaces */
    --bg-surface: rgba(4, 12, 19, 0.88) !important;
    --bg-alt: rgba(7, 17, 27, 0.94) !important;

    /* Card gradient (kept dark) */
    --card-gradient: linear-gradient(
      145deg,
      #020a10 0%,
      #08131d 40%,
      #0b1d2a 70%,
      #123447 100%
    ) !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(2, 10, 16, 0.95),
      rgba(8, 20, 30, 0.91),
      rgba(18, 52, 71, 0.86)
    ) !important;

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

    /* Cards */
    --card-bg: #040d14 !important;
    --card-border: rgba(99, 208, 203, 0.26) !important;
    --card-shadow: 0 0 24px rgba(99, 208, 203, 0.20) !important;

    /* Buttons */
    --btn-bg: #071111 !important;
    --btn-border: rgba(99, 208, 203, 0.68) !important;
    --btn-text: var(--text-primary) !important;
    --btn-hover-bg: #123447 !important;
    --btn-hover-text: #ffffff !important;

    /* Form fields */
    --input-bg: #030a11 !important;
    --input-border: rgba(182, 240, 236, 0.38) !important;
    --input-text: var(--text-primary) !important;
    --input-focus-border: var(--accent-page) !important;
    --input-focus-shadow: 0 0 11px rgba(99, 208, 203, 0.34) !important;

    /* Badges */
    --badge-bg: rgba(99, 208, 203, 0.20) !important;
    --badge-text: #e4ffff !important;
    --badge-border: rgba(99, 208, 203, 0.28) !important;
    --badge-shadow: 0 1px 6px rgba(99, 208, 203, 0.20) !important;

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

    /* Shadows */
    --page-box-shadow: 0 0 24px rgba(99, 208, 203, 0.22) !important;
    --page-shadow-soft: 0 10px 24px rgba(0,0,0,0.30) !important;
  }

  /* Dark component styling */
  html[data-theme="dark"] body.teal .site-header,
  html[data-theme="dark"] body.teal .site-footer {
    background: linear-gradient(to bottom, #020a10, #0b1d2a) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid rgba(189, 235, 230, 0.45) !important;
  }

  html[data-theme="dark"] body.teal .section-block {
    background: linear-gradient(145deg, #08131d 0%, #0b1d2a 60%, #123447 100%) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

  /* =========================
     Readability overrides (both themes)
     ========================= */
  body.teal .thread-card,
  body.teal .comment-card,
  body.teal .reply-card,
  body.teal .post-card {
    color: var(--text-primary) !important;
  }

  body.teal .thread-card p,
  body.teal .comment-card p,
  body.teal .reply-card p,
  body.teal .post-card p,
  body.teal .thread-card li,
  body.teal .comment-card li,
  body.teal .reply-card li,
  body.teal .post-card li {
    line-height: 1.65 !important;
    font-style: normal !important;
  }

  body.teal .steelman-box,
  body.teal .steelman-summary,
  body.teal blockquote.steelman {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-style: normal !important;
  }

  body.teal .steelman-label,
  body.teal .steelman-title {
    font-style: italic !important;
    opacity: 0.92 !important;
  }

  /* =========================
     Vote colours
     ========================= */
  html[data-theme="light"] body.teal {
    --vote-insight: #3eaaa2 !important;
    --vote-insight-bg: rgba(62, 170, 162, 0.08) !important;

    --vote-agree: #a58535 !important;
    --vote-agree-bg: rgba(165, 133, 53, 0.10) !important;

    --vote-challenge: #b25563 !important;
    --vote-challenge-bg: rgba(178, 85, 99, 0.10) !important;
  }

  html[data-theme="dark"] body.teal {
    --vote-insight: #7edde0 !important;
    --vote-insight-bg: rgba(126, 221, 224, 0.16) !important;

    --vote-agree: #d7bb80 !important;
    --vote-agree-bg: rgba(215, 187, 128, 0.18) !important;

    --vote-challenge: #ff8aa9 !important;
    --vote-challenge-bg: rgba(255, 138, 169, 0.18) !important;
  }

  html[data-theme="light"] body.teal .vote-btn,
  html[data-theme="dark"] body.teal .vote-btn {
    color: var(--text-primary) !important;
  }

  html[data-theme="light"] body.teal .vote-btn.active {
    color: var(--text-accent) !important;
  }

  html[data-theme="dark"] body.teal .vote-btn.active {
    color: var(--glyph-color) !important;
  }
}