/* ============================================================
   "Keep it cool" brand tokens.
   Every colour and type weight in the dashboard resolves here —
   change a value in this file and the whole UI follows.
   Contrast targets: 4.5:1 body text, 3:1 headline-scale text.
   ============================================================ */
:root {
  /* --- Core brand ------------------------------------------------ */
  --kc-marine:          #246EB9;  /* Bright Marine: links, interactive text, focus rings, borders */
  --kc-marine-deep:     #1A5590;  /* Deepened Bright Marine: filled surfaces, primary buttons */
  --kc-ink:             #123A62;  /* Headings and body ink */
  --kc-surface:         #FDFFFC;  /* Porcelain: card surfaces */
  --kc-bg:              #EFF4F9;  /* Page background */

  /* --- Ink scale (all >=4.5:1 on both page and card) -------------- */
  --kc-ink-2:           #3A5B7D;  /* Secondary body text        6.4:1 / 7.0:1 */
  --kc-ink-3:           #4B6A89;  /* Muted labels, small caps   5.1:1 / 5.6:1 */
  --kc-ink-4:           #5D7995;  /* Non-text only: dots, rules, disabled marks */

  /* --- Supporting surfaces --------------------------------------- */
  --kc-surface-raised:  #F7FAFD;  /* Subtly lifted panels inside cards */
  --kc-surface-sunken:  #E4EDF6;  /* Inset wells, track backgrounds */
  --kc-marine-tint:     #DCE8F4;  /* Avatar chips, soft marine fills */

  /* --- Lines and shadow ------------------------------------------ */
  --kc-hairline:        rgba(36, 110, 185, .1);   /* The 1px card hairline */
  --kc-hairline-strong: rgba(36, 110, 185, .22);  /* Chip and input outlines */
  --kc-shadow:          rgba(18, 58, 98, .07);
  --kc-shadow-soft:     rgba(18, 58, 98, .06);

  /* --- On filled (deep marine) surfaces --------------------------- */
  --kc-on-fill:         #FDFFFC;                  /* Body text on fill   7.6:1 */
  --kc-on-fill-2:       rgba(253, 255, 252, .78); /* Secondary on fill   5.3:1 */
  --kc-on-fill-3:       rgba(253, 255, 252, .55); /* Non-text only */
  --kc-on-fill-line:    rgba(253, 255, 252, .22); /* borders only — non-text */
  --kc-on-fill-chip:    rgba(253, 255, 252, .12); /* filled chips that carry text:
                                                     porcelain 5.7:1, custard 4.8:1 */

  /* --- Vanilla Custard: accent CTAs on dark, awaiting-reply -------- */
  --kc-custard:         #F5EE9E;                  /* On deep marine      6.4:1 */
  --kc-custard-ink:     #7A6A15;                  /* On custard bg       4.9:1 */
  --kc-custard-bg:      #FAF6D6;
  --kc-custard-a50:     rgba(245, 238, 158, .5);  /* Decorative dots and glows */
  --kc-custard-a22:     rgba(245, 238, 158, .22);
  --kc-custard-a20:     rgba(245, 238, 158, .2);
  --kc-custard-a10:     rgba(245, 238, 158, .1);

  /* --- Jade Green: positive, done, savings ------------------------ */
  --kc-jade:            #4CB944;                  /* Marks and rules; 3.0:1 on fill — never body text there */
  --kc-jade-ink:        #2C7A28;                  /* On jade bg          4.8:1 */
  --kc-jade-bg:         #E9F6E7;

  /* --- Tomato: overheating risk, whole-building items -------------- */
  --kc-tomato:          #F06543;                  /* Marks and rules only — 2.4:1 on fill, never text there */
  --kc-tomato-ink:      #C1401F;                  /* On tomato bg        4.5:1 */
  --kc-tomato-bg:       #FDEBE6;

  /* --- Backdrop --------------------------------------------------- */
  --kc-bg-blur:         rgba(239, 244, 249, .88); /* Sticky header over the page */

  /* --- Type ------------------------------------------------------- */
  --kc-font:            'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kc-weight-title:    600;
  --kc-weight-emphasis: 500;
  --kc-weight-body:     400;
}

/* Focus ring — Bright Marine, per the brand. */
:where(a, button, [onclick], [role="button"]):focus-visible {
  outline: 2px solid var(--kc-marine);
  outline-offset: 2px;
  border-radius: 6px;
}