/* ============================================================
   COLORS — Chestermere Mobile Massage
   Extracted from the brand logo: deep lake-navy → sky blue → cyan.
   Calm, clean, clinical-but-warm wellness palette.
   ============================================================ */

:root {
  /* --- Brand blue ramp (the logo lives here) --- */
  --blue-950: #06234f; /* deepest lake shadow */
  --blue-900: #0a2e6e; /* CHESTERMERE wordmark navy */
  --blue-800: #103c84;
  --blue-700: #1a4fa0;
  --blue-600: #2563b5; /* royal — primary action */
  --blue-500: #3d86c9;
  --blue-400: #5ba8dc; /* sky */
  --blue-300: #86c6e6;
  --blue-200: #b3ddf0; /* MOBILE MASSAGE cyan */
  --blue-100: #d9eef8;
  --blue-50:  #eff7fc;

  /* --- Cool neutrals (cards, type, lines) --- */
  --gray-950: #0e1726;
  --gray-900: #1b2638;
  --gray-800: #283246;
  --gray-700: #3c4a60;
  --gray-600: #5a6477;
  --gray-500: #7c8597;
  --gray-400: #a4abb8;
  --gray-300: #c9ced7;
  --gray-200: #e2e6ec;
  --gray-100: #eef1f5;
  --gray-50:  #f6f8fb;
  --white:    #ffffff;

  /* --- Semantic / status (kept calm & desaturated) --- */
  --success-600: #1f8a5b;
  --success-100: #dcf2e7;
  --warning-600: #c98a23;
  --warning-100: #fbf0d8;
  --danger-600:  #c64a46;
  --danger-100:  #f8e2e1;
  --info-600:    var(--blue-600);
  --info-100:    var(--blue-100);

  /* ============================================================
     SEMANTIC ALIASES — use these in product UI, not raw ramps
     ============================================================ */

  /* Text */
  --text-strong:   var(--blue-900);   /* headings, wordmark tone */
  --text-body:     #2b3648;           /* default copy */
  --text-muted:    var(--gray-500);   /* captions, meta */
  --text-on-brand: var(--white);      /* text on navy/royal fills */
  --text-link:     var(--blue-600);

  /* Surfaces */
  --surface-page:        #eef4f9;     /* soft cool page wash */
  --surface-page-deep:   var(--blue-950); /* dark sections / footer */
  --surface-card:        var(--white);
  --surface-card-muted:  var(--gray-50);
  --surface-sunken:      var(--gray-100);
  --surface-brand:       var(--blue-900);
  --surface-brand-soft:  var(--blue-50);

  /* Brand actions */
  --brand:          var(--blue-600);
  --brand-strong:   var(--blue-900);
  --brand-hover:    var(--blue-700);
  --brand-press:    var(--blue-800);
  --accent:         var(--blue-400);  /* sky accent / highlights */
  --accent-soft:    var(--blue-100);

  /* Lines & borders */
  --border-subtle:  rgba(16, 40, 80, 0.10);
  --border-default: rgba(16, 40, 80, 0.16);
  --border-strong:  rgba(16, 40, 80, 0.28);
  --focus-ring:     rgba(37, 99, 181, 0.45);
}