@layer tokens {
  /*
    The TGK Community accent contract.

    Shared TGK tokens own backgrounds, surfaces, typography, shadows, inputs,
    badges, headers and footers. This file supplies only the community emerald accent.
  */

  html[data-theme="light"] body.emerald {
    --text-accent: #2f7f66;
    --accent: var(--text-accent);
    --accent-page: #37936f;
    --highlight: #bde4d4;
    --glyph-color: #3c9276;
    --strong-text: #256b55;
    --cite-color: #28735b;
    --link-color: var(--text-accent);
    --link-hover: var(--accent-page);
    --border-accent: rgba(47, 127, 102, 0.36);
    --border-soft: rgba(47, 127, 102, 0.24);

    --gold-border: var(--border-accent);
    --gold-tone: var(--glyph-color);
    --soft-gold: var(--highlight);
    --golden-blaze: #d8f0e5;
    --accent-soft: rgba(47, 127, 102, 0.20);
    --accent-soft-glow: rgba(47, 127, 102, 0.30);
    --accent-glow: rgba(101, 168, 143, 0.34);
    --accent-gradient: linear-gradient(145deg, #bde4d4, #37936f);
  }

  html[data-theme="dark"] body.emerald {
    --text-accent: #56b28f;
    --accent: var(--text-accent);
    --accent-page: #4da581;
    --highlight: #a8d7c3;
    --glyph-color: #77c5aa;
    --strong-text: #a8d7c3;
    --cite-color: #56b28f;
    --link-color: var(--text-accent);
    --link-hover: var(--accent-page);
    --border-accent: rgba(86, 178, 143, 0.32);
    --border-soft: rgba(86, 178, 143, 0.20);

    --gold-border: var(--border-accent);
    --gold-tone: var(--glyph-color);
    --soft-gold: var(--highlight);
    --golden-blaze: #d9f7e9;
    --accent-soft: rgba(86, 178, 143, 0.18);
    --accent-soft-glow: rgba(86, 178, 143, 0.24);
    --accent-glow: rgba(168, 215, 195, 0.30);
    --accent-gradient: linear-gradient(145deg, #a8d7c3, #34745e);
  }

  html[data-theme="light"] body.emerald,
  html[data-theme="dark"] body.emerald {
    --hero-overlay-text: var(--text-primary);
    --hero-overlay-subtext: var(--text-secondary);
    --hero-overlay-rule: color-mix(in srgb, var(--text-accent) 72%, transparent);
    --hero-overlay-cta-text: var(--text-primary);
    --hero-overlay-cta-border: color-mix(in srgb, var(--text-accent) 72%, transparent);
    --hero-overlay-cta-border-strong: var(--text-accent);
    --hero-overlay-cta-inner-border: color-mix(in srgb, var(--text-accent) 36%, transparent);
    --hero-overlay-cta-inner-shadow: inset 0 0 8px color-mix(in srgb, var(--text-accent) 10%, transparent);
  }
}