/*
 * Site accent palette — single source of truth.
 *
 * The site's accent colour for links, active states, and primary buttons
 * is #258075 (teal). This file defines the canonical CSS variables;
 * every other stylesheet that needs the colour should reference one of
 * these variables, never a hardcoded hex.
 *
 *   --accent          base colour (use for text, borders, focus rings)
 *   --accent-hover    slightly lighter for hover/active hover
 *   --accent-rgb      "37, 128, 117" — for rgba(var(--accent-rgb), X)
 *   --accent-soft     translucent fill for active button backgrounds
 *   --accent-border   translucent border for active button outlines
 *   --accent-glow     retained for legacy/CSS-compat; avoid blurred halos in UI
 *   --accent-strong   on-fill text colour for buttons whose background
 *                     is the accent (white-ish for legibility)
 *
 * Loaded EARLY so other stylesheets that define a `--accent: #...` of
 * their own override it, but those definitions have been migrated to
 * the same teal — see ah-theme.css, liquid-glass.css, index-optimized.css,
 * styles.css.
 */

:root {
  --accent:         #258075;
  --accent-hover:   #2c9a8c;
  --accent-rgb:     37, 128, 117;
  --accent-soft:    rgba(37, 128, 117, 0.18);
  --accent-border:  rgba(37, 128, 117, 0.45);
  --accent-glow:    rgba(37, 128, 117, 0.55);
  --accent-strong:  #ffffff;
  /* Light teal for small UI text on dark backgrounds (replaces legacy #b3d9ff) */
  --accent-readable: #b8ebe3;
  /* Chips / toggles — active fill; used by index and index-optimized */
  --chipActive:     rgba(37, 128, 117, 0.25);
  /* Default (non-selected) controls — deliberately muted vs white text */
  --control-muted-fg: rgba(255, 255, 255, 0.48);
  --control-muted-fg-hover: rgba(255, 255, 255, 0.72);
}

/* Default link colour when a page hasn't styled <a> explicitly. Most
   layouts override this for sidebar nav, footer links, etc.; this is
   just a sane fallback so unstyled <a> in a panel doesn't render as
   browser-default blue underline. */
a:not([class]),
a.accent {
  color: var(--accent);
  text-decoration-color: rgba(var(--accent-rgb), 0.55);
  text-underline-offset: 2px;
}
a:not([class]):hover,
a.accent:hover {
  color: var(--accent-hover);
}