/* ============================================================================
   SellSeva — Color tokens
   Vivid marketplace blue + deep navy ink, green money/success, amber "needs",
   violet AI/credits. Surfaces are near-white on a cool blue-grey page.
   ========================================================================== */
:root {
  /* ---- Brand blue (primary) ---- */
  --blue-50:  #ECF2FF;
  --blue-100: #DBE7FF;
  --blue-200: #BAD0FE;
  --blue-300: #8DB2FC;
  --blue-400: #5A8EF8;
  --blue-500: #2F6FF0;   /* core brand */
  --blue-600: #1B5FE4;
  --blue-700: #1A4FC0;
  --blue-800: #1B439B;
  --blue-900: #1A3A7C;

  /* ---- Navy ink (text + dark surfaces) ---- */
  --navy-50:  #F4F6FB;
  --navy-100: #E7EBF4;
  --navy-200: #CAD3E6;
  --navy-300: #9EAAC8;
  --navy-400: #647295;
  --navy-500: #3E4A6B;
  --navy-600: #2A3553;
  --navy-700: #1B2542;
  --navy-800: #111A33;
  --navy-900: #0A1124;   /* near-black brand ink */

  /* ---- Neutral / slate (borders, fills, muted UI) ---- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F4F9;
  --slate-200: #E6EAF2;
  --slate-300: #D4DAE6;
  --slate-400: #AEB7C8;
  --slate-500: #7E8AA0;
  --slate-600: #5B6678;
  --slate-700: #404959;
  --slate-800: #2A313D;
  --white:     #FFFFFF;

  /* ---- Green (money, success, "live") ---- */
  --green-50:  #E9F8EF;
  --green-100: #CDEFDA;
  --green-200: #9DDFB6;
  --green-500: #19A957;
  --green-600: #128A47;
  --green-700: #0E6E39;

  /* ---- Amber (needs attention, pending, resolve) ---- */
  --amber-50:  #FEF4E6;
  --amber-100: #FCE6C2;
  --amber-500: #E08A0B;
  --amber-600: #C2740A;
  --amber-700: #97590A;

  /* ---- Red (errors, fee, danger) ---- */
  --red-50:  #FDECEC;
  --red-100: #FAD4D4;
  --red-500: #E0392F;
  --red-600: #C32A22;

  /* ---- Violet (AI, credits, background-removal) ---- */
  --violet-50:  #F1ECFE;
  --violet-100: #E3D8FD;
  --violet-500: #7C53E6;
  --violet-600: #6A3FD6;
  --violet-700: #5731B2;

  /* ====== Semantic aliases ====== */
  /* Page + surfaces */
  --surface-page:    var(--navy-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-raised:  var(--white);
  --surface-inverse: var(--navy-900);
  --surface-hover:   var(--slate-50);
  --surface-selected:var(--blue-50);

  /* Text */
  --text-strong:  var(--navy-900);
  --text-body:    var(--navy-700);
  --text-muted:   var(--slate-600);
  --text-subtle:  var(--slate-500);
  --text-on-dark: var(--white);
  --text-on-brand:var(--white);
  --text-link:    var(--blue-600);

  /* Brand */
  --brand:         var(--blue-500);
  --brand-strong:  var(--blue-600);
  --brand-press:   var(--blue-700);
  --brand-tint:    var(--blue-50);
  --on-brand:      var(--white);

  /* Borders */
  --border-subtle: var(--slate-200);
  --border-default:var(--slate-300);
  --border-strong: var(--slate-400);
  --border-brand:  var(--blue-300);
  --ring-focus:    color-mix(in srgb, var(--blue-500) 38%, transparent);

  /* Status */
  --success: var(--green-600);
  --success-tint: var(--green-50);
  --warning: var(--amber-600);
  --warning-tint: var(--amber-50);
  --danger:  var(--red-600);
  --danger-tint: var(--red-50);
  --ai:      var(--violet-600);
  --ai-tint: var(--violet-50);
  --money:   var(--green-600);

  /* Field validation (the pink "required" inputs in the product) */
  --field-required-bg:     #FDEEEE;
  --field-required-border: #F2C0BE;

  /* ---- Marketplace brand colors (third-party, for recognizability only) ---- */
  --mkt-ebay:     #0064D2;
  --mkt-poshmark: #822433;
  --mkt-mercari:  #5253D3;
  --mkt-depop:    #FF2300;
  --mkt-facebook: #1877F2;
  --mkt-offerup:  #36B37E;
  --mkt-etsy:     #F1641E;
  --mkt-amazon:   #FF9900;
}