/* tokens.css — DRUPAL_DATA_STACK shared frontend brand tokens.
 *
 * Overrides Pico v2 custom properties only. No bespoke variable names —
 * future Pico upgrades remain a vendored-file swap.
 *
 * Identity: API purple (#492376) + green focus (#6b9d2f), JetBrains Mono
 * default with sans-serif escape hatch on <article> and .prose.
 */

:root {
  /* Typography — monospace by default, sans-serif as escape hatch */
  --pico-font-family-monospace:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  --pico-font-family-sans-serif:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-font-size: 95%;
  --pico-line-height: 1.5;

  /* Spacing + chrome — slightly tighter than Pico defaults */
  --pico-spacing: 1rem;
  --pico-border-radius: 4px;
}

/* Brand palette — light theme. Selectors mirror Pico v2's exactly so
 * specificity ties and source order wins (this file loads after Pico). */
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-primary: #492376;
  --pico-primary-background: #492376;
  --pico-primary-border: #492376;
  --pico-primary-underline: #492376;
  --pico-primary-hover: #612f9d;
  --pico-primary-hover-background: #612f9d;
  --pico-primary-hover-border: #612f9d;
  --pico-primary-hover-underline: #612f9d;
  --pico-primary-focus: rgba(107, 157, 47, 0.5);
  --pico-primary-inverse: #ffffff;
}

/* Brand palette — dark theme (lighter purple for contrast). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: #c8b3e6;
    --pico-primary-background: #7e57c2;
    --pico-primary-border: #7e57c2;
    --pico-primary-underline: #c8b3e6;
    --pico-primary-hover: #9575cd;
    --pico-primary-hover-background: #9575cd;
    --pico-primary-hover-border: #9575cd;
    --pico-primary-hover-underline: #9575cd;
    --pico-primary-focus: rgba(107, 157, 47, 0.4);
    --pico-primary-inverse: #ffffff;
  }
}

[data-theme=dark] {
  --pico-primary: #c8b3e6;
  --pico-primary-background: #7e57c2;
  --pico-primary-border: #7e57c2;
  --pico-primary-underline: #c8b3e6;
  --pico-primary-hover: #9575cd;
  --pico-primary-hover-background: #9575cd;
  --pico-primary-hover-border: #9575cd;
  --pico-primary-hover-underline: #9575cd;
  --pico-primary-focus: rgba(107, 157, 47, 0.4);
  --pico-primary-inverse: #ffffff;
}

/* Sans-serif escape hatch for prose-shaped surfaces (markdown docs, etc) */
article,
.prose {
  font-family: var(--pico-font-family-sans-serif);
}
article code, article pre, article kbd, article samp,
.prose code, .prose pre, .prose kbd, .prose samp {
  font-family: var(--pico-font-family-monospace);
}

/* ── Brand expression on raw elements ───────────────────────────────────
 * Pico's defaults are intentionally minimal. These rules bring the API's
 * established visual weight forward — purple headings + table heads +
 * code accents — so a markdown-rendered page still reads as "ours"
 * without any classes.
 */

h1, h2, h3, h4, h5, h6 {
  color: var(--pico-primary);
}
h2 {
  border-bottom: 1px solid var(--pico-primary);
  padding-bottom: 0.3rem;
}

/* Muted thead — Zoekt-derived, subtle bg + muted text + bottom border.
 * Replaces the earlier branded white-on-purple style. Queue reports
 * (rtbc.html etc.) don't load this bundle, so they keep their inline
 * styles untouched. */
thead th, thead td {
  background: var(--pico-card-sectioning-background-color);
  color: var(--pico-muted-color);
  font-weight: 600;
  border-color: var(--pico-muted-border-color);
}

/* Pico v2 zebra-stripes every <tbody> table by default (no .striped class
 * needed). Dense data tables in this stack become unreadable because
 * --pico-secondary-background is a mid-luminance grey/blue that fights
 * with body text. Disable globally — opt back in per-surface with
 * <table class="striped"> and a custom row colour if a surface
 * genuinely needs alternation. */
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: transparent;
}

/* Inline code: soft tinted background + primary text. */
:not(pre) > code {
  background: color-mix(in srgb, var(--pico-primary) 10%, transparent);
  color: var(--pico-primary);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* Strong picks up the brand color. */
strong {
  color: var(--pico-primary);
}

/* Blockquote: branded left border. */
blockquote {
  border-left: 3px solid var(--pico-primary);
}