/* KLARO brand tokens — the single source of colors and the site font. Loaded before every other stylesheet. */
:root {
  --brand-green: #16704C;   /* primary: logo, key CTAs, highlight words */
  --brand-teal:  #35746E;   /* buttons, links, active states, icons */
  --accent:      #24B27F;   /* progress, success, chart lines, dots */
  --mint:        #7FE0BC;   /* text/accents on dark backgrounds */
  --ink:         #1E2F2C;   /* headings + body text */
  --muted:       #667570;   /* secondary text */
  --nav:         #0E1513;   /* dark nav/footer */
  --page:        #F4F6F3;   /* page background */
  --section:     #EEF3F0;   /* alternating section background */
  --selected:    #E4F7F1;   /* light highlight fills, selected cards */
  --line:        #DEE5E2;   /* borders, dividers */
  --red:         #D64545;   /* errors */
  --amber:       #E8A23A;   /* warnings */
  --dark-start:  #061F16;   /* dark hero/CTA gradient start */
  --dark-end:    #0B3A29;   /* dark hero/CTA gradient end */

  /* The single site font. Must match the Google Fonts link in base.html, home.html and admin/admin_base.html. */
  --font-sans: 'Inter', system-ui, sans-serif;

  /* Derived shades — mixed from the palette above, never new hues. */
  --brand-green-hover: color-mix(in srgb, var(--brand-green) 85%, #000);
  --brand-teal-hover:  color-mix(in srgb, var(--brand-teal) 85%, #000);
  --nav-2:      color-mix(in srgb, var(--nav) 94%, #fff);   /* raised panels on dark */
  --red-soft:   color-mix(in srgb, var(--red) 8%, #fff);
  --red-line:   color-mix(in srgb, var(--red) 35%, #fff);
  --red-ink:    color-mix(in srgb, var(--red) 80%, #000);   /* error text on light, AA */
  --amber-soft: color-mix(in srgb, var(--amber) 12%, #fff);
  --amber-line: color-mix(in srgb, var(--amber) 45%, #fff);
  --amber-ink:  color-mix(in srgb, var(--amber) 55%, #000); /* warning text on light, AA */
  --dark-gradient: linear-gradient(135deg, var(--dark-start), var(--dark-end));
  --brand-gradient: linear-gradient(90deg, var(--accent), var(--brand-green));
}