/* ===========================================================================
   SaleStreams — Color tokens
   Brand hue: warm coral-red (#F0532E). Warm-tinted neutrals.
   Base palette first, then semantic aliases. Reference semantic aliases in UI.
   =========================================================================== */

:root {
  /* --- Brand: Coral (primary) ------------------------------------------- */
  --coral-50:  #FFF3EF;
  --coral-100: #FFE2D8;
  --coral-200: #FFC4B1;
  --coral-300: #FF9C7E;
  --coral-400: #F87455;
  --coral-500: #F0532E;   /* brand primary */
  --coral-600: #D63E1B;
  --coral-700: #B22F12;
  --coral-800: #8C2510;
  --coral-900: #5C1809;

  /* --- Neutrals: warm-tinted slate -------------------------------------- */
  --ink-0:    #FFFFFF;
  --ink-25:   #FCFAF8;   /* app background, warm off-white */
  --ink-50:   #F7F4F1;
  --ink-100:  #EFEBE6;
  --ink-200:  #E2DCD5;
  --ink-300:  #CBC3BA;
  --ink-400:  #A69C90;
  --ink-500:  #7C7367;
  --ink-600:  #5A5249;
  --ink-700:  #403A33;
  --ink-800:  #2A2521;
  --ink-900:  #18140F;   /* near-black, primary text */

  /* --- Semantic hues ---------------------------------------------------- */
  /* Success / payment approved */
  --green-50:  #E9F7EF;
  --green-100: #C7ECD7;
  --green-500: #15935B;
  --green-600: #0F7A4A;
  --green-700: #0B5E39;

  /* Warning / low stock */
  --amber-50:  #FDF3E2;
  --amber-100: #F9E1B8;
  --amber-500: #D9870B;
  --amber-600: #B86E05;

  /* Error / declined — kept cooler & deeper than brand coral */
  --red-50:   #FDECEC;
  --red-100:  #F8CFCF;
  --red-500:  #D11F2B;
  --red-600:  #AE1822;

  /* Info / neutral accent */
  --blue-50:  #EAF1FE;
  --blue-100: #C8DAFB;
  --blue-500: #2E6BE6;
  --blue-600: #1E54C2;

  /* =========================================================================
     SEMANTIC ALIASES — use these in components, not the raw scale above
     ========================================================================= */

  /* Brand */
  --brand:            var(--coral-500);
  --brand-hover:      var(--coral-600);
  --brand-active:     var(--coral-700);
  --brand-subtle:     var(--coral-50);
  --brand-subtle-2:   var(--coral-100);
  --on-brand:         var(--ink-0);

  /* Text */
  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-subtle:      var(--ink-400);
  --text-on-dark:     var(--ink-25);
  --text-brand:       var(--coral-600);

  /* Surfaces */
  --surface-app:      var(--ink-25);
  --surface-card:     var(--ink-0);
  --surface-sunken:   var(--ink-50);
  --surface-raised:   var(--ink-0);
  --surface-inverse:  var(--ink-900);
  --surface-hover:    var(--ink-50);

  /* Borders */
  --border-subtle:    var(--ink-100);
  --border-default:   var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-brand:     var(--coral-300);

  /* Focus ring */
  --focus-ring:       var(--coral-400);

  /* Status — text/icon, surface fill, border */
  --success:          var(--green-600);
  --success-surface:  var(--green-50);
  --success-border:   var(--green-100);

  --warning:          var(--amber-600);
  --warning-surface:  var(--amber-50);
  --warning-border:   var(--amber-100);

  --danger:           var(--red-500);
  --danger-hover:     var(--red-600);
  --danger-surface:   var(--red-50);
  --danger-border:    var(--red-100);

  --info:             var(--blue-500);
  --info-surface:     var(--blue-50);
  --info-border:      var(--blue-100);
}