/* ==========================================================================
   CauseLogic — Color tokens
   Master palette from the CauseLogic Brand Board. The live Stratum MES app
   ships a near-identical teal-blue (#2E7393 / #65B4C1); both are exposed below.
   ========================================================================== */

:root {
  /* ---- Brand primitives (Brand Board) ---------------------------------- */
  --cl-blue:        #3E7E9F;   /* Primary Blue  — core brand, CTAs            */
  --cl-cyan:        #6CB8CB;   /* Secondary Cyan — highlights, success, accent*/
  --cl-blue-deep:   #214E67;   /* Dark Blue — headings on light, deep panels  */
  --cl-charcoal:    #1E2A33;   /* Text / Charcoal                             */
  --cl-paper:       #F5F7FA;   /* Light Background                            */

  /* ---- Blue ramp (derived, harmonious) --------------------------------- */
  --blue-50:   #EAF2F6;
  --blue-100:  #D2E4ED;
  --blue-200:  #A9CBDA;
  --blue-300:  #7FB0C6;
  --blue-400:  #5A95AE;
  --blue-500:  #3E7E9F;   /* = --cl-blue */
  --blue-600:  #336781;
  --blue-700:  #2A5468;
  --blue-800:  #214E67;   /* = --cl-blue-deep */
  --blue-900:  #18323F;

  /* ---- Cyan ramp ------------------------------------------------------- */
  --cyan-50:   #ECF7FA;
  --cyan-100:  #D6EDF2;
  --cyan-200:  #B4DEE7;
  --cyan-300:  #6CB8CB;   /* = --cl-cyan */
  --cyan-400:  #4FA4B9;
  --cyan-500:  #3B8A9E;

  /* ---- Neutral / charcoal ramp ----------------------------------------- */
  --ink-900:   #1E2A33;   /* = --cl-charcoal */
  --ink-800:   #2C3A45;
  --ink-700:   #3F4F5A;
  --ink-600:   #5A6B76;
  --ink-500:   #76858F;
  --ink-400:   #97A4AC;
  --ink-300:   #BCC6CC;
  --ink-200:   #D8DEE2;
  --ink-150:   #E5EAED;
  --ink-100:   #EEF1F4;
  --ink-50:    #F5F7FA;
  --white:     #FFFFFF;

  /* ---- Semantic status -------------------------------------------------- */
  --success:        #2E8B6F;
  --success-bg:     #E4F3EE;
  --success-border: #A9D9C9;

  --warning:        #BA7517;
  --warning-bg:     #FAEEDA;
  --warning-border: #EFC78A;

  --danger:         #C53A3A;
  --danger-bg:      #FBE9E9;
  --danger-border:  #ECB0B0;

  --info:           #336781;
  --info-bg:        #E6F0F5;
  --info-border:    #A9CBDA;

  /* ==== Semantic aliases (use these in product UI) ====================== */
  --color-primary:        var(--cl-blue);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-accent:         var(--cl-cyan);
  --color-accent-strong:  var(--cyan-400);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-600);
  --text-subtle:    var(--ink-500);
  --text-on-primary:#FFFFFF;
  --text-link:      var(--cl-blue);

  --surface-page:   #FFFFFF;
  --surface-sunken: var(--ink-50);
  --surface-card:   #FFFFFF;
  --surface-raised: var(--ink-50);
  --surface-inset:  var(--ink-100);
  --surface-brand:  var(--cl-blue-deep);

  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-focus:   var(--cl-blue);
}

/* ----------------------------------------------------------------------------
   Stratum MES — product scope. Apply data-product="stratum" to a subtree (or
   :root) to switch the running app palette to the exact live token values.
   ---------------------------------------------------------------------------- */
[data-product="stratum"] {
  --color-primary:        #2E7393;
  --color-primary-hover:  #245D78;
  --color-accent:         #65B4C1;

  --surface-page:   #FFFFFF;
  --surface-sunken: #F4F4F4;
  --surface-inset:  #E8E8E8;
  --text-strong:    #000000;
  --text-body:      #1E2A33;
  --text-muted:     #4A4A4A;
  --text-subtle:    #7A7A7A;
  --border-default: #D0D0D0;
}