/* ============================================================
   COLORS — Untitled UI palette
   Base color ramps (25→950) + semantic aliases.
   Brand = violet. Gray = cool/slate. Plus error/warning/success
   and a set of accent ramps used across charts, badges & illustrations.
   ============================================================ */

:root {
  /* ---- Base ---- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Gray (cool / slate) ---- */
  --gray-25:  #fcfcfd;
  --gray-50:  #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #101828;
  --gray-950: #0c111d;

  /* ---- Brand (primary violet) ---- */
  --brand-25:  #fcfaff;
  --brand-50:  #f9f5ff;
  --brand-100: #f4ebff;
  --brand-200: #e9d7fe;
  --brand-300: #d6bbfb;
  --brand-400: #b692f6;
  --brand-500: #9e77ed;
  --brand-600: #7f56d9;
  --brand-700: #6941c6;
  --brand-800: #53389e;
  --brand-900: #42307d;
  --brand-950: #2c1c5f;

  /* ---- Error (red) ---- */
  --error-25:  #fffbfa;
  --error-50:  #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #912018;
  --error-900: #7a271a;
  --error-950: #55160c;

  /* ---- Warning (amber) ---- */
  --warning-25:  #fffcf5;
  --warning-50:  #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --warning-800: #93370d;
  --warning-900: #7a2e0e;
  --warning-950: #4e1d09;

  /* ---- Success (green) ---- */
  --success-25:  #f6fef9;
  --success-50:  #ecfdf3;
  --success-100: #dcfae6;
  --success-200: #abefc6;
  --success-300: #75e0a7;
  --success-400: #47cd89;
  --success-500: #17b26a;
  --success-600: #079455;
  --success-700: #067647;
  --success-800: #085d3a;
  --success-900: #074d31;
  --success-950: #053321;

  /* ---- Accent: Blue ---- */
  --blue-50:  #eff8ff;
  --blue-100: #d1e9ff;
  --blue-200: #b2ddff;
  --blue-400: #53b1fd;
  --blue-500: #2e90fa;
  --blue-600: #1570ef;
  --blue-700: #175cd3;

  /* ---- Accent: Indigo ---- */
  --indigo-50:  #eef4ff;
  --indigo-100: #e0eaff;
  --indigo-500: #6172f3;
  --indigo-600: #444ce7;
  --indigo-700: #3538cd;

  /* ---- Accent: Pink ---- */
  --pink-50:  #fdf2fa;
  --pink-100: #fce7f6;
  --pink-500: #ee46bc;
  --pink-600: #dd2590;
  --pink-700: #c11574;

  /* ---- Accent: Teal ---- */
  --teal-50:  #f0fdf9;
  --teal-100: #ccfbef;
  --teal-500: #15b79e;
  --teal-600: #0e9384;
  --teal-700: #107569;

  /* ---- Accent: Orange ---- */
  --orange-50:  #fef6ee;
  --orange-100: #fdead7;
  --orange-500: #ef6820;
  --orange-600: #e04f16;
  --orange-700: #b93815;
}

/* ============================================================
   SEMANTIC ALIASES — reference these in components, not raw ramps.
   ============================================================ */
:root {
  /* Text */
  --text-primary:      var(--gray-900);
  --text-secondary:    var(--gray-700);
  --text-tertiary:     var(--gray-600);
  --text-quaternary:   var(--gray-500);
  --text-placeholder:  var(--gray-500);
  --text-disabled:     var(--gray-400);
  --text-white:        var(--color-white);
  --text-brand:        var(--brand-700);
  --text-brand-secondary: var(--brand-600);
  --text-error:        var(--error-600);
  --text-success:      var(--success-600);
  --text-warning:      var(--warning-600);

  /* Surfaces / backgrounds */
  --surface-primary:    var(--color-white);
  --surface-secondary:  var(--gray-50);
  --surface-tertiary:   var(--gray-100);
  --surface-disabled:   var(--gray-100);
  --surface-brand:      var(--brand-600);
  --surface-brand-soft: var(--brand-50);
  --surface-overlay:    rgba(12, 17, 29, 0.7);

  /* Borders */
  --border-primary:    var(--gray-300);
  --border-secondary:  var(--gray-200);
  --border-tertiary:   var(--gray-100);
  --border-disabled:   var(--gray-300);
  --border-brand:      var(--brand-300);
  --border-error:      var(--error-300);

  /* Foreground / icon */
  --fg-primary:       var(--gray-900);
  --fg-secondary:     var(--gray-700);
  --fg-quaternary:    var(--gray-400);
  --fg-brand:         var(--brand-600);

  /* Interactive states */
  --button-primary-bg:        var(--brand-600);
  --button-primary-bg-hover:   var(--brand-700);
  --button-primary-fg:        var(--color-white);
  --button-secondary-bg:      var(--color-white);
  --button-secondary-bg-hover: var(--gray-50);
  --button-secondary-fg:      var(--gray-700);
  --button-secondary-border:  var(--gray-300);

  --focus-ring: var(--brand-500);
}