/* Carbone 4 — Color system
   ----------------------------------------------------------------
   Sampled directly from carbone4.com and the Carbone 4 deck template.
   Navy is the spine of the brand; slate-blue carries structure and
   iconography; a single warm coral is the only accent. Everything
   else is air: white, a faint lavender page wash, and a cool blue-gray
   "mist" for grouping boxes. */
:root {
  /* ---- Base palette ---- */
  --c-navy:        #26324A; /* primary ink, dark surfaces, headings */
  --c-navy-deep:   #1B2436; /* deepest navy — full-bleed dark panels */
  --c-navy-700:    #324162; /* hover/raised navy */

  --c-slate:       #55739B; /* secondary structural blue (icon circles) */
  --c-slate-soft:  #8C9BB8; /* muted slate — captions, dividers on dark */
  --c-slate-tint:  #B9C3D6; /* faint slate — quiet labels */

  --c-coral:       #EC5C3D; /* THE accent — numbers, emphasis, CTAs */
  --c-coral-deep:  #D14826; /* coral pressed/hover */
  --c-coral-soft:  #FBE4DD; /* coral wash — tags, highlights */

  /* climate / data positive — DERIVED (harmonised in oklch from the
     teal of Carbone 4 hero imagery, not an official brand token). */
  --c-teal:        #2F8E7F;
  --c-teal-soft:   #DCEDE9;

  /* ---- Neutrals ---- */
  --c-white:       #FFFFFF;
  --c-cloud:       #F4F6FA; /* page background — barely-there lavender */
  --c-mist:        #DCE3EC; /* grouping boxes, deck panels, fills */
  --c-line:        #E2E6EE; /* hairline borders on light */
  --c-line-strong: #CBD3E0;
  --c-fog:         #EEF1F6; /* zebra rows, subtle fills */

  /* ---- Text ramp ---- */
  --text-strong:   var(--c-navy);      /* headings, key copy */
  --text-body:     #3A4763;            /* body — navy softened */
  --text-muted:    #6B7793;            /* captions, meta */
  --text-faint:    #97A1B8;            /* placeholders, disabled */
  --text-on-dark:  #FFFFFF;
  --text-on-dark-muted: #B9C3D6;

  /* ---- Semantic surfaces ---- */
  --surface-page:   var(--c-cloud);
  --surface-card:   var(--c-white);
  --surface-raised: var(--c-white);
  --surface-sunken: var(--c-fog);
  --surface-group:  var(--c-mist);
  --surface-dark:   var(--c-navy);
  --surface-darker: var(--c-navy-deep);

  /* ---- Semantic accents ---- */
  --accent:         var(--c-coral);
  --accent-hover:   var(--c-coral-deep);
  --focus-ring:     #9FB3D6;

  /* ---- Status ---- */
  --ok:    var(--c-teal);
  --warn:  #E0A23B;
  --err:   #D14826;
  --info:  var(--c-slate);
}