/* ===========================================================================
   Reform — Color tokens
   ---------------------------------------------------------------------------
   Values taken from the Reform Figma ("Сайт Reform") color styles:
     #606DED  ultraviolet / cornflower  — PRIMARY brand accent (CTAs, active
                                          cards, dividers)
     #CCF75E  neon lime                 — attention highlight (active dept,
                                          critical markers) — on dark surfaces
     #12112C  midnight ink              — primary dark surface (status blocks)
     #2B2742  graphite-violet           — card/plaque surface on the ink bg
     #D1D5FF  pale lavender             — soft surfaces, secondary text on dark
     #5A566D  marengo (grey-violet)     — service: numbers, arrows, dividers

   Token KEYS are kept stable; intermediate steps derived in OKLCH to keep the
   ramps harmonious around the Figma anchors.
   =========================================================================== */

:root {
  /* --- Brand ultraviolet (anchor #606DED) ------------------------------ */
  --purple-50:  #eff0fe;
  --purple-100: #e0e2fc;
  --purple-200: #c5c9f8;
  --purple-300: #a3a9f3;
  --purple-400: #8189f0;
  --purple-500: #606ded;   /* BASE — brand accent (Figma) */
  --purple-600: #4a54d8;
  --purple-700: #3a43b0;
  --purple-800: #30388a;
  --purple-900: #282e69;

  /* --- Neon lime (anchor #CCF75E) — attention accent ------------------- */
  --lime-50:  #f6fde4;
  --lime-100: #ecfbc6;
  --lime-200: #ddf996;
  --lime-300: #d6f87d;
  --lime-400: #d1f86d;
  --lime-500: #ccf75e;   /* BASE — neon lime (Figma) */
  --lime-600: #b2e23f;
  --lime-700: #8aac2f;   /* readable lime on light surfaces */

  /* --- Ink / graphite-violet (dark surfaces) --------------------------- */
  --graphite-950: #0b0a1a;
  --graphite-900: #12112c;  /* primary dark surface (Figma) */
  --graphite-800: #2b2742;  /* card / plaque on ink (Figma) */
  --graphite-700: #393455;
  --graphite-600: #494466;
  --graphite-500: #5a566d;  /* marengo — service grey-violet (Figma) */

  /* --- Lavender (soft surfaces / muted text on dark) ------------------- */
  --lavender-100: #e8eaff;
  --lavender-200: #d1d5ff;  /* BASE (Figma) */
  --lavender-300: #b3b8f0;

  /* --- Neutrals (cool, faint violet tint) ------------------------------ */
  --white:    #ffffff;
  --grey-50:  #f6f6fb;
  --grey-100: #ececf4;
  --grey-200: #dedee9;
  --grey-300: #c4c4d6;
  --grey-400: #9a99b2;
  --grey-500: #6c6a82;
  --grey-600: #4e4c60;
  --grey-700: #393748;
  --grey-800: #262433;
  --grey-900: #15131f;

  /* --- Companion cornflower (tags / linear icons) --------------------- */
  --blue-50:  #eaedfe;
  --blue-100: #d7ddfc;
  --blue-200: #b6c0f8;
  --blue-400: #6d7cf0;
  --blue-500: #4f63ec;
  --blue-600: #3a4dd0;
  --blue-700: #2d3ca6;

  /* --- Semantic: success (growth deltas) ------------------------------ */
  /* ⚠️ Not explicit in the Figma palette — derived to harmonise. */
  --green-50:  #e8f7ee;
  --green-100: #cdeed9;
  --green-500: #1f9d57;
  --green-600: #178047;

  /* --- Semantic: danger ------------------------------------------------*/
  --red-50:   #fdecec;
  --red-500:  #e0464b;
  --red-600:  #c2363b;

  /* --- Semantic: warning ----------------------------------------------- */
  --amber-50:  #fdf3e4;
  --amber-500: #e3a03a;
  --amber-600: #c5832a;

  /* =====================================================================
     SEMANTIC ALIASES  — reference these in components, not raw scales
     ===================================================================== */

  /* Brand */
  --brand:            var(--purple-500);
  --brand-hover:      var(--purple-600);
  --brand-press:      var(--purple-700);
  --brand-subtle:     var(--purple-50);
  --brand-on:         var(--white);

  /* Lime attention accent */
  --accent-lime:        var(--lime-500);
  --accent-lime-strong: var(--lime-600);
  --accent-lime-ink:    var(--lime-700);   /* lime text on light */
  --on-lime:            var(--graphite-900);

  /* Surfaces */
  --surface-page:       var(--grey-50);
  --surface-card:       var(--white);
  --surface-sunken:     var(--grey-100);
  --surface-inverse:    var(--graphite-900);   /* #12112C */
  --surface-inverse-2:  var(--graphite-800);   /* #2B2742 */
  --surface-brand:      var(--purple-500);
  --surface-lavender:   var(--lavender-200);

  /* Text */
  --text-strong:    var(--graphite-900);
  --text-body:      var(--grey-700);
  --text-muted:     var(--grey-500);
  --text-faint:     var(--grey-400);
  --text-on-dark:   var(--white);
  --text-on-dark-muted: #c4c8ee;          /* pale lavender per Figma */
  --text-on-brand:  var(--white);
  --text-link:      var(--blue-600);

  /* Borders */
  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-400);
  --border-on-dark: rgba(209, 213, 255, 0.14);   /* lavender hairline on ink */
  --border-brand:   var(--purple-500);

  /* Tags / categories */
  --tag-bg:       var(--blue-50);
  --tag-fg:       var(--blue-600);
  --tag-bg-dark:  rgba(99, 110, 237, 0.20);
  --tag-fg-dark:  var(--lavender-200);
  --tag-lime-bg:  var(--lime-500);
  --tag-lime-fg:  var(--graphite-900);

  /* Icon (linear, circular) */
  --icon-accent:  var(--purple-500);
  --icon-ring:    var(--purple-100);

  /* Feedback */
  --success:  var(--green-500);
  --success-bg: var(--green-50);
  --danger:   var(--red-500);
  --danger-bg: var(--red-50);
  --warning:  var(--amber-500);
  --warning-bg: var(--amber-50);

  /* Focus */
  --focus-ring: rgba(96, 109, 237, 0.45);
}