/* Vambiant — Color tokens
   Source of truth: Brand Identity Guidelines v1.0 (2025), section 02 Brand Colors. */
:root {
  /* ---- Primary palette ---- */
  --vam-navy:       #0C243D;  /* Deep navy — primary brand color, wordmark, text */
  --vam-blue:       #9AB7CD;  /* Steel blue — the mark / signature accent */
  --vam-white:      #FFFFFF;

  /* ---- Secondary palette ---- */
  --vam-blue-soft:  #C1CED6;  /* Pale blue-grey — supporting surfaces, dividers */
  --vam-navy-2:     #22405B;  /* Mid navy — hover fills, secondary surfaces */
  --vam-teal:       #1E9C99;  /* Teal — the single lively accent, sparing use */

  /* ---- Extended navy ramp (derived, harmonious in oklch) ---- */
  --vam-navy-900:   #08192B;
  --vam-navy-800:   #0C243D;  /* == --vam-navy */
  --vam-navy-700:   #16324f;
  --vam-navy-600:   #22405B;  /* == --vam-navy-2 */
  --vam-navy-500:   #3a5670;

  /* ---- Blue ramp (derived) ---- */
  --vam-blue-700:   #6d90ad;
  --vam-blue-600:   #829fb9;
  --vam-blue-500:   #9AB7CD;  /* == --vam-blue */
  --vam-blue-300:   #C1CED6;  /* == --vam-blue-soft */
  --vam-blue-100:   #dde6ec;
  --vam-blue-50:    #eef2f5;

  /* ---- Neutrals ---- */
  --vam-ink:        #0C243D;
  --vam-slate:      #4d6072;  /* muted body text on light */
  --vam-mist:       #7d8b98;  /* captions, meta */
  --vam-line:       #dfe6eb;  /* hairline borders */
  --vam-cloud:      #f4f7f9;  /* app canvas / section wash */
  --vam-paper:      #ffffff;

  /* ---- Teal ramp ---- */
  --vam-teal-600:   #178481;
  --vam-teal-500:   #1E9C99;
  --vam-teal-100:   #d6efee;

  /* ---- Gradients (brandbook) ---- */
  --vam-gradient-primary:   linear-gradient(135deg, #0C243D 0%, #22405B 55%, #9AB7CD 100%); /* @kind color */
  --vam-gradient-secondary: linear-gradient(135deg, #22405B 0%, #1E9C99 100%); /* @kind color */
  --vam-gradient-mist:      linear-gradient(180deg, #ffffff 0%, #eef2f5 100%); /* @kind color */

  /* ---- Semantic aliases ---- */
  --text-strong:    var(--vam-navy);
  --text-body:      var(--vam-slate);
  --text-muted:     var(--vam-mist);
  --text-on-dark:   #ffffff;
  --text-on-dark-muted: #b8c6d3;

  --surface-page:   var(--vam-white);
  --surface-canvas: var(--vam-cloud);
  --surface-card:   var(--vam-white);
  --surface-dark:   var(--vam-navy);
  --surface-accent: var(--vam-blue-50);

  --border-subtle:  var(--vam-line);
  --border-strong:  var(--vam-blue-300);

  --accent:         var(--vam-navy);
  --accent-soft:    var(--vam-blue);
  --accent-lively:  var(--vam-teal);

  --focus-ring:     #9AB7CD;

  --link:           var(--vam-navy);
  --link-hover:     var(--vam-teal);
}