/* ============================================================
   COLORS — Toss palette (primitive → semantic)
   Primary UI blue is blue500 #3182f6. Brand blue #0064ff is
   logo/marketing ONLY — never an interactive UI color.
   ============================================================ */

:root {
  /* ---- Primitive: Blue scale ---- */
  --blue-50:  #e8f3ff;
  --blue-100: #c9e2ff;
  --blue-200: #90c2ff;
  --blue-300: #64a8ff;
  --blue-400: #4593fc;
  --blue-500: #3182f6;  /* Toss Blue — the workhorse interactive color */
  --blue-600: #2272eb;  /* hover / pressed */
  --blue-700: #1b64da;
  --blue-800: #1957c2;

  /* ---- Primitive: Grey scale (warm undertone) ---- */
  --grey-50:  #f9fafb;
  --grey-100: #f2f4f6;
  --grey-200: #e5e8eb;
  --grey-300: #d1d6db;
  --grey-400: #b0b8c1;
  --grey-500: #8b95a1;
  --grey-600: #6b7684;
  --grey-700: #4e5968;
  --grey-800: #333d4b;
  --grey-900: #191f28;  /* near-black with blue undertone */

  /* ---- Primitive: Semantic hues ---- */
  --red-500:    #f04452;  /* error / negative */
  --red-600:    #e42939;
  --green-500:  #03b26c;  /* success / positive */
  --green-600:  #00a05f;
  --orange-500: #fe9800;  /* warning / pending */
  --yellow-500: #ffc342;  /* caution / highlight */
  --teal-500:   #18a5a5;  /* info accent */
  --purple-500: #a234c7;  /* premium */

  /* ---- Primitive: Brand (logo / marketing only) ---- */
  --brand-blue: #0064ff;  /* Pantone 2175 C */
  --brand-gray: #202632;  /* Pantone 433 C */

  /* ---- Translucent overlays (blue-tinted dark scrim) ---- */
  --overlay-dim:    rgba(2, 9, 19, 0.5);
  --overlay-strong: rgba(2, 9, 19, 0.72);
  --weak-blue:      rgba(100, 168, 255, 0.15);
  --weak-dark:      rgba(2, 32, 71, 0.05);
  --weak-red:       rgba(251, 136, 144, 0.15);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --background:       #ffffff;
  --surface:          var(--grey-100);   /* page-section fill */
  --surface-raised:   #ffffff;           /* cards float on white */
  --surface-sunken:   var(--grey-50);
  --float-background:  #ffffff;           /* tooltips, dropdowns, sheets */

  /* Text */
  --text-strong:    var(--grey-900);   /* headings, strongest */
  --text-default:   var(--grey-800);   /* labels, nav */
  --text-body:      var(--grey-600);   /* body, descriptions */
  --text-secondary: var(--grey-500);   /* captions, metadata */
  --text-placeholder: var(--grey-400);
  --text-on-primary:  #ffffff;

  /* Interactive */
  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-600);
  --primary-weak:   var(--blue-50);
  --link:           var(--blue-700);

  /* Borders / dividers */
  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
  --divider:       var(--grey-100);

  /* Semantic feedback */
  --error:   var(--red-500);
  --success: var(--green-500);
  --warning: var(--orange-500);
  --info:    var(--teal-500);

  /* Financial directional */
  --positive: var(--green-500);  /* income, gains */
  --negative: var(--red-500);    /* expense, losses */
}