/* Huddle — Color tokens
   Light theme. Indigo primary, Untitled-UI-style neutral gray ramp.
   Base palette first, then semantic aliases consumers should reach for. */

:root {
  /* ---- Neutrals (gray ramp) ---- */
  --gray-25:  #FCFCFD;
  --gray-50:  #F9FAFB;
  --gray-75:  #F7F8FA; /* product surface */
  --gray-100: #F2F4F7;
  --gray-200: #E4E7EC; /* hairline border */
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085; /* muted text */
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828; /* primary text */

  /* ---- Primary (Indigo) ---- */
  --indigo-25:  #FCFCFF;
  --indigo-50:  #EEF2FF; /* primary tint */
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5; /* primary */
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;

  /* ---- Success (green) ---- */
  --green-50:  #ECFDF3;
  --green-100: #DCFAE6;
  --green-200: #ABEFC6;
  --green-500: #15803D; /* success */
  --green-600: #137333;
  --green-700: #0F5C29;

  /* ---- Danger (red) ---- */
  --red-50:  #FEF3F2;
  --red-100: #FEE4E2;
  --red-200: #FECDCA;
  --red-500: #B42318; /* danger */
  --red-600: #9A1F15;
  --red-700: #7A1812;

  /* ---- Warning (amber) ---- */
  --amber-50:  #FFFAEB;
  --amber-100: #FEF0C7;
  --amber-200: #FEDF89;
  --amber-500: #B54708; /* warning text */
  --amber-600: #93370D;

  /* ---- Info (blue, distinct from indigo primary) ---- */
  --blue-50:  #EFF8FF;
  --blue-100: #D1E9FF;
  --blue-500: #175CD3;

  /* ================= Semantic aliases ================= */

  /* Backgrounds & surfaces */
  --bg-app:        #FFFFFF;          /* page background */
  --bg-surface:    var(--gray-75);   /* sunken canvas behind cards */
  --bg-card:       #FFFFFF;          /* raised card / panel */
  --bg-subtle:     var(--gray-50);   /* zebra rows, inset wells */
  --bg-hover:      var(--gray-100);  /* row / item hover */
  --bg-active:     var(--gray-200);  /* pressed neutral */
  --bg-inverse:    var(--gray-900);  /* tooltips, dark chips */

  /* Text */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-disabled:  var(--gray-400);
  --text-inverse:   #FFFFFF;
  --text-link:      var(--indigo-600);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-focus:   var(--indigo-600);

  /* Primary action */
  --primary:         var(--indigo-600);
  --primary-hover:   var(--indigo-700);
  --primary-active:  var(--indigo-800);
  --primary-tint:    var(--indigo-50);
  --primary-tint-2:  var(--indigo-100);
  --on-primary:      #FFFFFF;

  /* Status — foreground / surface pairs for pills & banners */
  --success:        var(--green-500);
  --success-surface:var(--green-50);
  --success-border: var(--green-200);

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

  --warning:        var(--amber-500);
  --warning-surface:var(--amber-50);
  --warning-border: var(--amber-200);

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

  /* Focus ring */
  --focus-ring: 0 0 0 4px var(--indigo-100);
}