/* Tangram Studios, color system
   A premium, largely monochrome palette anchored by the tangram orange.
   Base scales first, semantic aliases below. */
:root {
  /* Brand orange, sampled from the mark (#E35D25) */
  --orange-50:  #fdf3ee;
  --orange-100: #fbe1d3;
  --orange-200: #f6bd9e;
  --orange-300: #f09a6b;
  --orange-400: #eb7847;
  --orange-500: #e35d25; /* core brand */
  --orange-600: #c74a17;
  --orange-700: #a13b13;
  --orange-800: #7d2f12;
  --orange-900: #5e2611;

  /* Accent, deep teal, the complement to the orange (used sparingly alongside it) */
  --teal-50:   #e6f1f0;
  --teal-100:  #c3dedc;
  --teal-200:  #8fbfbc;
  --teal-300:  #579c98;
  --teal-400:  #2f7d79;
  --teal-500:  #1c6360; /* core accent */
  --teal-600:  #164f4d;
  --teal-700:  #123e3d;
  --teal-800:  #0e302f;
  --teal-900:  #0a2322;

  /* Warm neutrals, ink through paper */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfaf9;
  --neutral-50:  #f6f4f2;
  --neutral-100: #ece9e6;
  --neutral-200: #dcd8d3;
  --neutral-300: #c2bcb5;
  --neutral-400: #9c948b;
  --neutral-500: #756d64;
  --neutral-600: #565049;
  --neutral-700: #3b3733;
  --neutral-800: #262320;
  --neutral-900: #1a1a1a; /* brand ink (#1A1A1A) */
  --neutral-950: #100f0e;

  /* Semantic status */
  --green-500:  #2f9e6b;
  --green-50:   #e7f5ee;
  --amber-500:  #d69324;
  --amber-50:   #fbf1dc;
  --red-500:    #d1453b;
  --red-50:     #fbe8e6;
  --blue-500:   #3a6ea5;
  --blue-50:    #e8eff6;

  /* ---- Semantic aliases ---- */
  --brand:            var(--orange-500);
  --brand-hover:      var(--orange-600);
  --brand-active:     var(--orange-700);
  --brand-subtle:     var(--orange-50);
  --brand-on:         var(--neutral-0);

  --accent:           var(--teal-500);
  --accent-hover:     var(--teal-600);
  --accent-active:    var(--teal-700);
  --accent-subtle:    var(--teal-50);
  --accent-on:        var(--neutral-0);

  --ink:              var(--neutral-900);
  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--neutral-600);
  --text-tertiary:    var(--neutral-500);
  --text-disabled:    var(--neutral-400);
  --text-on-brand:    var(--neutral-0);
  --text-on-dark:     var(--neutral-25);
  --text-link:        var(--orange-600);
  --text-link-hover:  var(--orange-700);

  --surface-page:     var(--neutral-25);
  --surface-card:     var(--neutral-0);
  --surface-sunken:   var(--neutral-50);
  --surface-hover:    var(--neutral-50);
  --surface-inverse:  var(--neutral-900);
  --surface-brand:    var(--orange-500);

  --border-subtle:    var(--neutral-100);
  --border-default:   var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-focus:     var(--orange-500);

  --success:          var(--green-500);
  --success-subtle:   var(--green-50);
  --warning:          var(--amber-500);
  --warning-subtle:   var(--amber-50);
  --danger:           var(--red-500);
  --danger-subtle:    var(--red-50);
  --info:             var(--blue-500);
  --info-subtle:      var(--blue-50);
}