/* ============================================================
   MAP HealthCare — Color tokens
   Derived directly from the brand logo & favicon:
   red map-pin (gradient) + silver/charcoal grays.
   ============================================================ */
:root {
  /* ---- Brand red (the pin gradient: bright at top → deep brick at base) ---- */
  --red-100: #FDECEA;   /* tint wash */
  --red-200: #FAD5D1;
  --red-300: #F2A39B;
  --red-400: #E85A4E;
  --red-500: #DE3429;   /* mid pin red */
  --red-600: #D7261C;   /* PRIMARY brand red */
  --red-700: #B5231B;
  --red-800: #A02A21;   /* "MAP" wordmark brick red */
  --red-900: #7E211A;   /* deepest pin base */

  /* The literal pin gradient (bright top → deep base) */
  --pin-from: #ED352A;
  --pin-to:   #A02A21;

  /* ---- Silver / neutral grays (the logo's outline + "healthcare" wordmark) ---- */
  --silver-100: #F4F5F6;
  --silver-200: #E6E8EA;
  --silver-300: #D2D6DA;
  --silver-400: #B6BBC1;
  --silver-500: #959AA1;  /* logo outline silver */
  --silver-600: #81858B;  /* "healthcare" / tagline gray */
  --silver-700: #5C616A;
  --silver-800: #3A3F47;

  /* ---- Charcoal ink (headings / body) ---- */
  --ink-900: #15181C;
  --ink-800: #1E2227;
  --ink-700: #2C313A;
  --ink-600: #474D57;

  /* ---- Surfaces ---- */
  --white: #FFFFFF;
  --paper: #FBFBFC;     /* page background, barely-off-white */
  --mist:  #F4F5F7;     /* alternating section band */
  --cloud: #EEF0F3;

  /* ---- Semantic status ---- */
  --success-600: #12805C;
  --success-100: #E3F4ED;
  --warning-600: #C97A12;
  --warning-100: #FCEFD7;
  --danger-600:  #C42B1C;
  --danger-100:  #FBE7E4;
  --info-600:    #2A6FB0;
  --info-100:    #E5F0F8;

  /* ============================================================
     Semantic aliases — reference these in components.
     ============================================================ */
  --color-brand:           var(--red-600);
  --color-brand-strong:    var(--red-800);
  --color-brand-hover:     var(--red-700);
  --color-brand-wash:      var(--red-100);
  --color-accent:          var(--silver-600);

  --text-heading:          var(--ink-900);
  --text-body:             var(--ink-700);
  --text-muted:            var(--silver-700);
  --text-faint:            var(--silver-600);
  --text-on-brand:         var(--white);
  --text-link:             var(--red-700);

  --surface-page:          var(--paper);
  --surface-card:          var(--white);
  --surface-sunken:        var(--mist);
  --surface-band:          var(--mist);
  --surface-inverse:       var(--ink-900);

  --border-subtle:         var(--silver-200);
  --border-default:        var(--silver-300);
  --border-strong:         var(--silver-400);
  --focus-ring:            color-mix(in srgb, var(--red-600) 45%, transparent);
}