/* ============================================================
   E-Catalyst — Color tokens
   Neutral-dark system with a green growth ramp.
   bg #1E1E1E → #2d2d2d → #454545 anchors; primary green
   #2E8B57 → #61bc84 → #c6ffe6 is the growth pop; accent
   #8FBC8F / #345e37 supports. Depth is flat color-block.

   Source palette (client screenshot):
   --primary-100 #2E8B57 · --primary-200 #61bc84 · --primary-300 #c6ffe6
   --accent-100  #8FBC8F · --accent-200  #345e37
   --text-100 #FFFFFF · --text-200 #e0e0e0
   --bg-100 #1E1E1E · --bg-200 #2d2d2d · --bg-300 #454545
   ============================================================ */

:root {
  /* ---- Raw palette (verbatim from brand) ---- */
  --primary-100: #2E8B57;
  --primary-200: #61bc84;
  --primary-300: #c6ffe6;
  --accent-100:  #8FBC8F;
  --accent-200:  #345e37;
  --text-100:    #FFFFFF;
  --text-200:    #e0e0e0;
  --bg-100:      #1E1E1E;
  --bg-200:      #2d2d2d;
  --bg-300:      #454545;

  /* ---- Primary · dark neutral ladder + green ---- */
  --jade-black: #1E1E1E;   /* Primary dark bg & ink      = bg-100 */
  --deep-jade:  #2d2d2d;   /* Dark surfaces / blocks     = bg-200 */
  --jade:       #454545;   /* Borders, hover             = bg-300 */
  --viridian:   #2E8B57;   /* Mid-tone green support     = primary-100 */
  --mint:       #61bc84;   /* Accent — the green pop      = primary-200 */

  /* ---- Secondary · light ---- */
  --white:      #FFFFFF;   /* Body on dark; crisp blocks  */
  --canvas:     #F4F5F4;   /* Default LIGHT band bg       */
  --canvas-cream: #FAFAF8; /* Warm off-white — transactional canvas */
  --surface-soft: #ECECEC; /* Soft secondary light block  */
  --frost:      #EEEEEE;   /* Legacy alias of soft light  */

  /* ---- Extended ladder (neutral → green, for depth & states) ---- */
  --jade-950: #141414;
  --jade-900: #1E1E1E;
  --jade-800: #2d2d2d;
  --jade-700: #454545;
  --jade-600: #345e37;   /* accent-200 */
  --jade-500: #2E8B57;   /* primary-100 */
  --jade-400: #61bc84;   /* primary-200 */
  --jade-300: #8FBC8F;   /* accent-100 */
  --jade-200: #a9d9bb;
  --jade-100: #c6ffe6;   /* primary-300 */

  /* ---- Green accent state ramp ---- */
  --mint-hover:   #7fd3a0;
  --mint-press:   #2E8B57;
  --mint-soft:    rgba(97, 188, 132, 0.14);
  --mint-line:    rgba(97, 188, 132, 0.34);

  /* ---- Band system — the page's pacing device ---- */
  --band-dark:  var(--jade-black);
  --band-light: var(--canvas);

  /* ---- Two-track canvas ----
     The --canvas-* / --track-* names are aliases of the same values. */
  --canvas-night:          var(--jade-black);  /* dark canvas             */
  --canvas-void:           #141414;            /* near-black page behind panels */
  --canvas-night-elevated: #2d2d2d;            /* cards on dark           */
  --canvas-light:          var(--white);       /* crisp transactional card */
  --track-cinematic:    var(--jade-black);  /* dark marketing canvas   */
  --track-cinematic-elevated: #2d2d2d;      /* cards on dark           */
  --track-transactional: var(--canvas-cream);/* light product canvas   */

  /* ---- Caption-card tints (flat color blocks, square) ---- */
  --tint-mint: var(--mint);        /* on-tint text = jade-black */
  --tint-deep: var(--accent-200);  /* #345e37, on-tint text = white */
  --tint-soft: var(--surface-soft);/* on-tint text = jade-black */

  /* ---- Semantic · surfaces (flat blocks, square corners) ---- */
  --surface-base:    var(--jade-black);
  --surface-sunken:  var(--jade-950);
  --surface-card:    var(--deep-jade);
  --surface-raised:  #383838;
  --surface-light:   var(--white);
  --surface-canvas:  var(--canvas);
  --surface-frost:   var(--surface-soft);

  /* ---- Semantic · text on DARK ---- */
  --text-strong:    var(--white);
  --text-body:      #e0e0e0;                    /* = text-200 */
  --text-muted:     rgba(255, 255, 255, 0.60);
  --text-faint:     rgba(255, 255, 255, 0.40);
  --text-accent:    var(--mint);
  --text-on-mint:   var(--jade-black);
  --on-ink-muted:   #A0A0A0;
  --link-cool-1:    #A0A0A0;
  --link-cool-2:    #8A8A8A;

  /* ---- Semantic · text on LIGHT ---- */
  --text-on-light:  var(--jade-black);
  --text-on-light-muted: #5A5A5A;
  --ink-muted:      #5A5A5A;

  /* ---- Semantic · borders / hairlines ---- */
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --border-default: var(--jade);
  --border-strong:  var(--viridian);
  --hairline-light: #DADADA;
  --border-on-light: rgba(30, 30, 30, 0.14);
  --focus-ring:     var(--mint);

  /* ---- Status ---- */
  --success: #61bc84;
  --warning: #F2C94C;
  --danger:  #FF6B6B;
  --info:    #5BC0DE;
}