/* Harmony Tree — Color tokens
   Palette sampled directly from the brand logo: four kawaii leaves
   (sage, coral, sky, sun), rosy blush cheeks, and warm bark neutrals. */
:root {
  /* ---- Sage (primary — the central leaf) ---- */
  --sage-100: #E8F4EE;
  --sage-200: #D0EADD;
  --sage-300: #B0DBC7;
  --sage-400: #8ECBAE; /* base */
  --sage-500: #6FB595;
  --sage-600: #55997C;

  /* ---- Coral (maple leaf) ---- */
  --coral-100: #FBEAE3;
  --coral-200: #F7D2C4;
  --coral-300: #F0B29E;
  --coral-400: #E89B84; /* base */
  --coral-500: #D57A5F;

  /* ---- Sky (monstera leaf, dusty blue) ---- */
  --sky-100: #EAF1F5;
  --sky-200: #D2E0E9;
  --sky-300: #B0C9D8;
  --sky-400: #93B8CE; /* base */
  --sky-500: #6E99B6;

  /* ---- Sun (oak leaf, warm yellow) ---- */
  --sun-100: #FDF4DC;
  --sun-200: #F9E7B4;
  --sun-300: #F2D585;
  --sun-400: #EFC969; /* base */
  --sun-500: #D9AE44;

  /* ---- Blush (rosy cheeks) ---- */
  --blush-200: #F8DEEB;
  --blush-300: #EFB8CF;
  --blush-400: #E495B6;

  /* ---- Bark (warm brown neutrals — the "TREE" wordmark) ---- */
  --bark-900: #5F5347;
  --bark-700: #8B7B6B;
  --bark-500: #A99A8A;
  --bark-300: #C9BDAF;
  --bark-200: #E0D7CB;
  --bark-100: #EEE7DC;

  /* ---- Paper / surfaces ---- */
  --paper:  #FDFBF7;
  --cream:  #F6F1E9;
  --white:  #FFFFFF;

  /* ================= Semantic aliases ================= */
  --brand:            var(--sage-500);
  --brand-strong:     var(--sage-600);
  --brand-soft:       var(--sage-200);
  --brand-tint:       var(--sage-100);

  --text-strong:      var(--bark-900);
  --text-body:        var(--bark-700);
  --text-muted:       var(--bark-500);
  --text-inverse:     var(--white);
  --text-on-brand:    #ffffff;

  --surface-page:     var(--paper);
  --surface-card:     var(--white);
  --surface-alt:      var(--cream);
  --surface-sunk:     var(--bark-100);

  --border:           var(--bark-200);
  --border-strong:    var(--bark-300);
  --focus-ring:       var(--sage-400);

  --success:          var(--sage-500);
  --success-soft:     var(--sage-100);
  --warning:          var(--sun-500);
  --warning-soft:     var(--sun-100);
  --danger:           var(--coral-500);
  --danger-soft:      var(--coral-100);
  --info:             var(--sky-500);
  --info-soft:        var(--sky-100);
}