/* ===========================================================================
   CSW Innovative Solutions — Color tokens
   ---------------------------------------------------------------------------
   Brand DNA: the magnifying-glass mark runs a left-to-right gradient from a
   deep, trustworthy blue through teal into a bright signal green. Blue carries
   authority and governance; green carries verification / "evidence found".
   The system is built on a cool navy-slate neutral ramp so collateral reads
   as enterprise, legal-grade and precise.
   =========================================================================== */

:root {
  /* ---- Brand gradient anchors (sampled from the logo) ------------------- */
  --brand-blue-deep:  #0b3fb0;   /* darkest blue, handle base                */
  --brand-blue:       #0b63e5;   /* PRIMARY brand blue                       */
  --brand-blue-bright:#2e86f5;   /* lifted blue                              */
  --brand-cyan:       #16bcc8;   /* teal midpoint                            */
  --brand-teal:       #1fd0bf;   /* blue→green transition                    */
  --brand-green:      #2fcf86;   /* signal green                             */
  --brand-green-bright:#46e39a;  /* brightest node green                     */

  /* ---- The signature CSW gradient (use sparingly, as accent) ------------ */
  --brand-gradient:        linear-gradient(110deg, var(--brand-blue) 0%, var(--brand-cyan) 52%, var(--brand-green) 100%); /* @kind color */
  --brand-gradient-soft:   linear-gradient(110deg, #0b63e5 0%, #16bcc8 55%, #2fcf86 100%); /* @kind color */
  --brand-gradient-vert:   linear-gradient(160deg, var(--brand-blue) 0%, var(--brand-cyan) 55%, var(--brand-green) 100%); /* @kind color */
  --brand-gradient-text:   linear-gradient(100deg, var(--brand-blue) 8%, var(--brand-cyan) 55%, var(--brand-green) 96%); /* @kind color */

  /* ---- Blue ramp -------------------------------------------------------- */
  --blue-50:  #eaf2ff;
  --blue-100: #d2e3ff;
  --blue-200: #a9c8fc;
  --blue-300: #76a6f7;
  --blue-400: #3f84f1;
  --blue-500: #1b6ce9;
  --blue-600: #0b63e5;   /* = --brand-blue */
  --blue-700: #0a4fbc;
  --blue-800: #0c3f93;
  --blue-900: #0d3270;

  /* ---- Cyan / teal ramp ------------------------------------------------- */
  --cyan-50:  #e4faff;
  --cyan-100: #c1f1f7;
  --cyan-300: #5fdce6;
  --cyan-500: #16bcc8;
  --cyan-700: #0e8b96;

  /* ---- Green ramp ------------------------------------------------------- */
  --green-50:  #e6fbf1;
  --green-100: #c2f3dd;
  --green-300: #6fe3b0;
  --green-400: #46e39a;
  --green-500: #2fcf86;
  --green-600: #1fae6e;
  --green-700: #168555;

  /* ---- Neutral navy / slate ramp (cool) --------------------------------- */
  --ink-950: #060c18;    /* deepest navy, near-black                         */
  --ink-900: #0a1222;    /* primary dark surface & strong text on light      */
  --ink-800: #101b30;
  --ink-700: #18263f;
  --slate-600: #2c3c57;
  --slate-500: #41526e;
  --slate-450: #5a6b86;
  --slate-400: #76869f;
  --slate-350: #93a1b6;
  --slate-300: #b3bece;
  --slate-250: #cdd6e1;
  --slate-200: #dde4ec;
  --slate-150: #e8edf3;
  --slate-100: #f0f4f9;
  --slate-50:  #f6f9fc;
  --white:     #ffffff;

  /* ---- Semantic status -------------------------------------------------- */
  --success:      #1fae6e;
  --success-bg:   #e6fbf1;
  --success-text: #146e48;
  --warning:      #d4880b;
  --warning-bg:   #fdf2dd;
  --warning-text: #8a5a06;
  --danger:       #d8473b;
  --danger-bg:    #fdeceb;
  --danger-text:  #9c2c23;
  --info:         #0b63e5;
  --info-bg:      #eaf2ff;
  --info-text:    #0a4fbc;

  /* =======================================================================
     SEMANTIC ALIASES — reach for these in components, not the raw ramps.
     ======================================================================= */

  /* Text */
  --text-strong:   var(--ink-900);    /* headings, key figures               */
  --text-body:     var(--slate-600);  /* default paragraph text              */
  --text-muted:    var(--slate-450);  /* secondary / supporting copy         */
  --text-subtle:   var(--slate-400);  /* meta, captions, timestamps          */
  --text-on-brand: var(--white);
  --text-on-dark:  #e7edf6;
  --text-link:     var(--brand-blue);
  --text-link-hover: var(--blue-700);

  /* Surfaces */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-hover:   var(--slate-100);
  --surface-inset:   var(--slate-150);
  --surface-dark:    var(--ink-900);
  --surface-darker:  var(--ink-950);
  --surface-dark-card: var(--ink-800);

  /* Borders & lines */
  --border-subtle:  var(--slate-150);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-dark:    #21314c;
  --divider:        var(--slate-150);

  /* Brand roles */
  --brand-primary:        var(--brand-blue);
  --brand-primary-hover:  var(--blue-700);
  --brand-primary-active: var(--blue-800);
  --accent-cyan:          var(--brand-cyan);
  --accent-green:         var(--brand-green);
  --on-brand:             var(--white);

  /* Focus & selection */
  --focus-ring:        0 0 0 3px rgba(11, 99, 229, 0.32);
  --focus-ring-color:  var(--brand-blue);
  --selection-bg:      #cfe2ff;

  /* Tints used for fills (evidence / verification motifs) */
  --tint-blue:   #eaf2ff;
  --tint-cyan:   #e4faff;
  --tint-green:  #e6fbf1;
  --tint-slate:  #f0f4f9;
}