/* ============================================================
   GroupApp 2.0 — Color tokens
   Extracted verbatim from the Group.app 2.0 Figma (Desktop App).
   Base palette + semantic aliases. Values are exact hex of the
   rgb() fills used in the source; do not round.
   ============================================================ */
:root {
  /* ---- Brand blue (primary) ---- */
  --blue-600: #365de6; /* rgb(54,93,230)  primary actions, links, active states */
  --blue-500: #5c7ffb; /* rgb(92,127,251) secondary blue / gradients */
  --blue-100: #e8edff; /* rgb(232,237,255) soft blue surface */
  --blue-50:  #f2f5ff; /* rgb(242,245,255) faint blue surface */
  --blue-track: #ccd7ff; /* rgb(204,215,255) toggle "on" track */
  --blue-scroll: rgba(54, 92, 230, 0.41); /* scrollbar thumb (from web app) */

  /* ---- Accents ---- */
  --amber-400: #ffbb51;  /* rgb(255,187,81)  badges, notification dots */
  --amber-500: #ffbe0b;  /* rgb(255,190,11)  highlight yellow */
  --purple-600: #8338ec; /* rgb(131,56,236)  category / plan accents */
  --purple-400: #7e5eff; /* rgb(126,94,255)  gradient purple */
  --magenta-500: #c74bda;/* rgb(199,75,218)  gradient magenta */
  --green-400: #2ead80;  /* rgb(46,173,128)  solid success */
  --green-100: #dcffd3;  /* rgb(220,255,211) positive status pill bg */
  --navy-900: #061047;   /* rgb(6,16,71)     deep navy (marketing) */

  /* ---- Ink (text) ---- */
  --ink-900: #202125; /* rgb(32,33,37)    primary text */
  --ink-800: #1e1e1e; /* rgb(30,30,30)    strong heading */
  --ink-700: #171717; /* rgb(23,23,23)    near-black */
  --ink-600: #5b5c65; /* rgb(91,92,101)   secondary text */
  --ink-500: #71737e; /* rgb(113,115,126) muted text */
  --ink-450: #767a8a; /* rgb(118,122,138) placeholder / faint */
  --black:   #000000;

  /* ---- Surfaces ---- */
  --white:          #ffffff;
  --surface-app:    #f7f8f9; /* rgb(247,248,249) app background */
  --surface-app-alt:#eff0f2; /* legacy web-app background */
  --surface-muted:  #ebecf0; /* rgb(235,236,240) input fill, hover fill */

  /* ---- Borders ---- */
  --border-strong:  #c9cad1; /* rgb(201,202,209) input / outline button */
  --border-default: #dcdde1; /* rgb(220,221,225) card & panel borders */
  --border-subtle:  #ebecf0; /* rgb(235,236,240) faint dividers */
  --border-faint:   #d5d8df; /* rgb(213,216,223) */

  /* ---- Semantic status ---- */
  --status-positive-bg: var(--green-100);
  --status-positive-fg: var(--ink-900);
  --status-positive-solid: var(--green-400);
  --status-warning-bg: #ffefcf;   /* inferred amber tint — see readme */
  --status-warning-fg: #7a5a00;   /* inferred */
  --status-negative-bg: #ffe1e0;  /* inferred red tint — see readme */
  --status-negative-fg: #b42318;  /* inferred */

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  #2f52cc; /* darkened blue-600 for hover */
  --color-primary-soft:   var(--blue-100);
  --color-on-primary:     var(--white);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-placeholder: var(--ink-450);
  --text-inverse:   var(--white);
  --text-link:      var(--blue-600);

  --surface-page:   var(--surface-app);
  --surface-card:   var(--white);
  --surface-input:  var(--surface-muted);
  --surface-hover:  var(--surface-muted);

  --border-card:    var(--border-default);
  --border-input:   var(--border-strong);
  --divider:        var(--border-subtle);

  --focus-ring:     var(--blue-600);
}