/* Change --theme-color, then refresh, to try a different page accent.
   Tints and hover states follow automatically. Text and status colors stay
   independent so a brand change does not change their meaning. */
:root {
  --theme-color: #0052cc;
  --highlight-color: #fcba13;
  --theme-hover: color-mix(in srgb, var(--theme-color) 82%, black);
  --theme-tint: color-mix(in srgb, var(--theme-color) 4%, white);
  --theme-tint-strong: color-mix(in srgb, var(--theme-color) 8%, white);
  --theme-line: color-mix(in srgb, var(--theme-color) 16%, white);
  --theme-line-strong: color-mix(in srgb, var(--theme-color) 45%, white);
  --theme-caption: color-mix(in srgb, var(--theme-color) 65%, #596477);
  --theme-shadow: color-mix(in srgb, var(--theme-color) 6%, transparent);
  --theme-ring: color-mix(in srgb, var(--theme-color) 4%, transparent);
  --theme-glow: color-mix(in srgb, var(--theme-color) 8%, transparent);
  --theme-on-accent: white;
  --theme-on-accent-muted: color-mix(in srgb, var(--theme-color) 15%, white);

  /* Optional section override: preserve the custom green ecosystem heading.
     Set this to var(--theme-color) to follow the main accent instead. */
  --ecosystem-heading-color: #34b584;

  --ink: #151c2b;
  --muted: #596477;
  --line: #dde3ec;
  --pale: var(--theme-tint);
}