@layer components {
  /* ===================================================
     TGK Glossary Entries
     Version: 2.5  Tokenised + Consolidated (2026)
     Changes:
     • Updated to v2.5 token standard (full parity with root + all pillars)
     • Cleaner structure and comments
     • All font choices, borders, hover states, glossary layout, and responsive behaviour preserved 100%
     =================================================== */

  .glossary-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.25rem);
    margin: var(--space-lg) 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }

  .glossary-letter-nav a {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: var(--type-weight-bold, 700);
    color: var(--text-accent);
    text-decoration: none;
    letter-spacing: 0.05em;
  }

  .glossary-letter-nav a:hover {
    color: var(--text-primary);
  }

  .glossary-letter-heading {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--text-accent);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-subtle);
  }

  .glossary {
    margin: var(--space-xl) 0;
    padding: 0;
    font-size: var(--type-body-size);
    line-height: var(--type-body-line, 1.85);
  }

  .glossary-entry {
    margin-bottom: var(--space-md, 1.25rem);
    padding-left: var(--glossary-indent, 1rem);
    border-left: 2px solid var(--text-accent);
  }

  .glossary-entry dt {
    margin-bottom: var(--space-xs, 0.25rem);
    font-family: var(--font-display);
    font-weight: var(--type-weight-bold, 700);
    font-size: var(--type-body-size);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .glossary-definition {
    margin: 0;
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-style: italic;
    color: var(--text-primary);
  }

  .glossary-definition-text {
    display: block;
  }

  .glossary-vault-links {
    margin: var(--space-xs, 0.25rem) 0 0;
    font-family: var(--type-body-font, var(--font-serif, "Libre Baskerville", serif));
    font-size: 0.95em;
    font-style: normal;
    color: var(--text-secondary);
  }

  .glossary-link {
    color: var(--text-accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-accent);
  }

  .glossary-link:hover {
    border-bottom-style: solid;
  }
}