/* ============================================================
   THE SKIN CLINIC — Color tokens
   Palette derived from the logo's soft mint-sage butterfly (#90D0B0),
   grounded in warm creams and a near-black ink, with a blush accent.
   ============================================================ */
:root {
  /* --- Sage / mint (brand primary ramp) --- */
  --sage-50:  #F1F8F4;
  --sage-100: #E4F1EA;
  --sage-200: #C9E4D5;
  --sage-300: #A9D6BC;
  --sage-400: #90D0B0; /* the logo butterfly mint */
  --sage-500: #6FB894;
  --sage-600: #52996F;
  --sage-700: #3C7856;
  --sage-800: #2C5A41;
  --sage-900: #1E3D2C;

  /* --- Blush (warm complement / secondary accent) --- */
  --blush-50:  #FBF3F1;
  --blush-100: #F6E6E1;
  --blush-200: #EED2C9;
  --blush-300: #E7C3BC;
  --blush-400: #DBA79D;
  --blush-500: #C98A7E;

  /* --- Warm neutrals --- */
  --cream:    #F8F5EF; /* primary page background */
  --sand:     #EFEAE0; /* secondary surface / hairline fills */
  --linen:    #E5DED1;
  --stone:    #C9C2B5;
  --taupe:    #9B9385;

  /* --- Ink (text) --- */
  --ink-900: #202422; /* logo lettering — near-black, slightly green */
  --ink-700: #43494A;
  --ink-500: #6B7173;
  --ink-400: #8B9192;
  --white:   #FFFFFF;

  /* --- Semantic status --- */
  --success: #52996F;
  --success-bg: #E4F1EA;
  --warning: #C9942F;
  --warning-bg: #FBF1DC;
  --danger:  #C0574B;
  --danger-bg: #F8E7E3;
  --info:    #4E7E9B;
  --info-bg: #E5EFF4;

  /* ============================================================
     Semantic aliases — reference these in components/UI kits
     ============================================================ */
  --brand:            var(--sage-500);
  --brand-strong:     var(--sage-600);
  --brand-soft:       var(--sage-100);
  --brand-tint:       var(--sage-50);
  --brand-contrast:   var(--white);
  --accent:           var(--blush-400);
  --accent-soft:      var(--blush-100);

  --bg-page:          var(--cream);
  --bg-raised:        var(--white);
  --bg-sunken:        var(--sand);
  --surface-card:     var(--white);
  --surface-muted:    var(--sage-50);

  --text-heading:     var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-400);
  --text-on-brand:    var(--white);
  --text-link:        var(--sage-700);
  --text-link-hover:  var(--sage-800);

  --border-hairline:  #E3DCD0;
  --border-soft:      #D8D0C2;
  --border-strong:    #C4BBAC;
  --border-brand:     var(--sage-300);

  --focus-ring:       color-mix(in srgb, var(--sage-500) 55%, transparent);
}