/* ===========================================================================
   Germfree — Color tokens  (per official Brand Guidelines)
   Primary:   Blue  #164193  (Pantone 286)
              Teal  #45B9BC  (Pantone 3252)
   Secondary: Magenta #BD5199 · Indigo #4A5DA7 · Grey #80807F · Ink #3C3C3B
   =========================================================================== */
:root {
  /* ---- Brand: Blue (primary) — #164193 ---- */
  --blue-50:  #e8edf6;
  --blue-100: #c6d2ea;
  --blue-200: #93a6d2;
  --blue-300: #5f79ba;
  --blue-400: #3458a3;
  --blue-500: #164193;  /* core brand blue (Pantone 286) */
  --blue-600: #143a84;
  --blue-700: #102f6b;
  --blue-800: #0c2450;
  --blue-900: #081838;

  /* ---- Brand: Teal (primary) — #45B9BC ---- */
  --teal-50:  #e8f7f7;
  --teal-100: #c8ecec;
  --teal-200: #9adddd;
  --teal-300: #6bcccd;
  --teal-400: #45b9bc;  /* core brand teal (Pantone 3252) */
  --teal-500: #2ba0a3;
  --teal-600: #218487;
  --teal-700: #1a696b;
  --teal-800: #134e50;
  --teal-900: #0c3637;

  /* ---- Secondary palette ---- */
  --magenta-300: #d488b9;
  --magenta-400: #bd5199;  /* secondary magenta */
  --magenta-500: #a23d80;
  --indigo-300:  #8290c4;
  --indigo-400:  #4a5da7;  /* secondary indigo */
  --indigo-500:  #3b4d90;

  /* ---- Neutrals (brand grey #80807F → ink #3C3C3B) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7f8;
  --neutral-100: #eceef0;
  --neutral-200: #dddedf;
  --neutral-300: #c4c5c5;
  --neutral-400: #a0a1a0;
  --neutral-500: #80807f;  /* brand grey (K63) */
  --neutral-600: #636362;
  --neutral-700: #4c4c4b;
  --neutral-800: #3c3c3b;  /* brand ink (K90) */
  --neutral-900: #2a2a29;

  /* ---- Semantic status ---- */
  --success-500: #2f9e6b;
  --success-50:  #e7f5ee;
  --warning-500: #d98a1f;
  --warning-50:  #fbf0dd;
  --danger-500:  #c4423a;
  --danger-50:   #f8e6e5;
  --info-500:    var(--blue-500);
  --info-50:     var(--blue-50);

  /* ===== Semantic aliases ===== */
  /* Brand */
  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-secondary:      var(--teal-400);
  --brand-secondary-hover:var(--teal-500);
  --brand-accent:         var(--teal-400);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--blue-800);
  --surface-brand:   var(--blue-500);

  /* Text — headings blue, subheads teal, body in ink/black */
  --text-strong:  var(--neutral-800);
  --text-body:    var(--neutral-700);
  --text-muted:   var(--neutral-500);
  --text-subtle:  var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-link:    var(--blue-500);
  --text-heading: var(--blue-500);
  --text-subhead: var(--teal-600);
  --text-on-brand:var(--neutral-0);

  /* Borders & lines */
  --border-subtle: var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand:  var(--blue-500);

  /* Focus */
  --focus-ring: var(--teal-400);
}