/* 21°AC colour tokens — brand guidelines §04.
   Core: Setpoint Navy, Cool Cyan, Signal Red, Clear White.
   Extended: Frost White, Vapour Grey, Mist Grey, Deep Chill, Skylight.
   Navy elevation steps (--navy-850/-800/-700) are DERIVED for dark-mode card
   elevation ("lighter navy cards") — not named in the PDF. */

:root {
  /* ---- Core palette (base values) ---- */
  --setpoint-navy: #0F1D2B;
  --cool-cyan:     #17B8DE;
  --signal-red:    #E60000;
  --clear-white:   #FFFFFF;

  /* ---- Extended palette ---- */
  --frost-white:   #F2F7F9;  /* light cool background, default digital surface */
  --vapour-grey:   #5E6E79;  /* secondary text on light, borders, disabled */
  --mist-grey:     #A5B4BD;  /* secondary text on dark surfaces */
  --deep-chill:    #0C5A73;  /* hover/pressed states, depth without shadows */
  --skylight:      #E6F7FB;  /* pale cyan tint, accessible highlight panels */

  /* ---- Derived navy elevation ramp (dark-mode surfaces) ---- */
  --navy-850: #142435;       /* raised card on navy */
  --navy-800: #182B3F;       /* higher elevation / hover on card */
  --navy-700: #24384D;       /* borders, dividers on dark */

  /* ---- Semantic: light surfaces ---- */
  --surface-page:      var(--frost-white);
  --surface-card:      var(--clear-white);
  --surface-highlight: var(--skylight);     /* cyan-tinted panel; navy text on it */

  /* ---- Semantic: dark (signature app) surfaces ---- */
  --surface-dark-page: var(--setpoint-navy);
  --surface-dark-card: var(--navy-850);
  --surface-dark-raised: var(--navy-800);

  /* ---- Semantic: text ---- */
  --text-body:          var(--setpoint-navy);  /* if in doubt, it's navy */
  --text-secondary:     var(--vapour-grey);    /* light surfaces only, AA */
  --text-on-dark:       var(--clear-white);
  --text-secondary-dark: var(--mist-grey);     /* dark surfaces only */

  /* ---- Semantic: actions (cyan owns actions) ---- */
  --action:         var(--cool-cyan);
  --action-hover:   var(--deep-chill);
  --action-pressed: var(--deep-chill);
  --link:           var(--deep-chill);   /* cyan fails as small text on white; use Deep Chill */
  --link-on-dark:   var(--cool-cyan);    /* cyan on navy: 7.3:1 AAA */

  /* ---- Semantic: status ---- */
  --alert:  var(--signal-red);  /* accent only — icons, badges, small labels; never fills or body text */
  --heat:   var(--signal-red);
  --cool:   var(--cool-cyan);

  /* ---- Semantic: chrome ---- */
  --border:        #D7E0E5;              /* hairline on light (derived from Vapour Grey family) */
  --border-strong: var(--vapour-grey);
  --border-dark:   var(--navy-700);
  --disabled:      var(--vapour-grey);
  --focus-ring:    var(--cool-cyan);     /* 2px cyan outline */
}