/*
  Kingfisher Defense — design tokens
  Source: kingfisher-brand-design-tokens-v1.1.md (LOCKED, 2026-09-06)
  Change values only here. No page/component should hardcode a color directly.
*/

:root {
  /* Core palette — pulled directly from the logo file */
  --kf-navy: #18262F;        /* background — primary background, all pages */
  --kf-teal: #118B8E;        /* primary / large UI chrome only: headers, borders, icons, decorative — NOT small body-size link text on navy */
  --kf-orange: #EE8118;      /* accent — reserved for the CTA button background only */
  --kf-white: #FFFFFF;       /* headline text — short high-impact lines only, never the CTA button's own text */
  --kf-text-body: #E8ECEE;   /* body/paragraph text on dark backgrounds — not pure white (avoids halation) */

  /*
    --kf-teal-link: corrected token (v1.1) for body/link-size teal text.
    Plain --kf-teal on navy measures ~3.76:1 — fails the 4.5:1 normal-text
    threshold. This starting value (~#4DBFC2) is the doc's suggested
    starting point ONLY. MUST be verified with an actual contrast checker
    against the final rendered page (including any hover/visited state)
    before shipping — do not trust this hex in isolation.
  */
  --kf-teal-link: #4DBFC2; /* TODO: verify contrast on real rendered page before public launch */

  /* CTA button — corrected pairing (v1.1): navy text on orange, NOT white on orange (white-on-orange measured ~2.7:1, fails AA) */
  --kf-cta-bg: var(--kf-orange);
  --kf-cta-text: var(--kf-navy);

  /* Visible keyboard focus ring — required per §3, not just hover/click states */
  --kf-focus-ring: 2px solid var(--kf-teal-link);
  --kf-focus-ring-offset: 2px;
}