/* ============================================================
   Zenflux — Color Tokens · "Electric Flow" (Concept A)
   Blue + Green superconductor brand. Deep navy + electric blue
   for depth/trust; teal + mint for freshness; aqua for energy.
   Prefer semantic aliases in product code.
   ============================================================ */

:root {
  /* ---- Brand anchors (Electric Flow palette) -------------- */
  --zf-navy:  #0B132B;   /* deep navy      — dark surface / ink */
  --zf-blue:  #2563FF;   /* electric blue  — primary          */
  --zf-aqua:  #00C2FF;   /* aqua           — accent / energy   */
  --zf-teal:  #0DBA8C;   /* teal green     — secondary / CTA hover */
  --zf-mint:  #A7F3D0;   /* mint accent    — chips / soft cues */
  --zf-gray:  #8A96A8;   /* cool gray      — muted             */
  --zf-gray-light: #E7ECF2; /* light gray   — borders / rows   */
  --zf-off-white:  #F6F8FB; /* soft off-white — subtle surface */

  /* ---- Blue ramp (electric blue = 500) -------------------- */
  --blue-50:  #EEF3FF;
  --blue-100: #DBE5FF;
  --blue-200: #B8CCFF;
  --blue-300: #8AA9FF;
  --blue-400: #5480FF;
  --blue-500: #2563FF;
  --blue-600: #1A4BD6;
  --blue-700: #1B3EA8;
  --blue-800: #1B3583;
  --blue-900: #182C66;

  /* ---- Teal ramp (teal green = 500) ----------------------- */
  --teal-50:  #E6FAF3;
  --teal-100: #C4F2E3;
  --teal-200: #8AE6C8;
  --teal-300: #4FD6AC;
  --teal-400: #22C594;
  --teal-500: #0DBA8C;
  --teal-600: #0A9670;
  --teal-700: #0A7659;
  --teal-800: #0B5F49;
  --teal-900: #0A4E3D;

  /* ---- Aqua (bright accent / energy glow) ----------------- */
  --cyan-300: #6FDCFF;
  --cyan-400: #00C2FF;   /* "Aqua" */
  --cyan-500: #00A6DB;

  /* ---- Mint (soft cues, chips) ---------------------------- */
  --mint-50:  #E9FBF2;
  --mint-100: #C6F5DF;
  --mint-200: #A7F3D0;   /* "Mint Accent" */

  /* ---- Neutral ramp (cool grays → navy ink) --------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FB;   /* soft off-white */
  --neutral-100: #E7ECF2;   /* light gray     */
  --neutral-200: #D3DBE6;
  --neutral-300: #B3BECD;
  --neutral-400: #8A96A8;   /* cool gray      */
  --neutral-500: #5C6675;
  --neutral-600: #454E5C;
  --neutral-700: #333B47;
  --neutral-800: #1A2234;
  --neutral-900: #0B132B;   /* deep navy ink  */

  /* ---- Navy (dark surfaces) ------------------------------- */
  --navy-950: #060B1A;
  --navy-900: #0B132B;
  --navy-800: #121C3A;
  --navy-700: #1B274D;
  --navy-600: #273458;

  /* ---- Amber (retained for warning/warm accent — not a
         headline color in Electric Flow) --------------------- */
  --amber-100: #FCEBCF;
  --amber-300: #F6C079;
  --amber-400: #F2A541;
  --amber-500: #E08E22;

  /* ---- Support: danger (error/validation states) ---------- */
  --red-100: #FBE3E3;
  --red-500: #E5484D;
  --red-600: #C83B40;

  /* ========================================================
     SEMANTIC ALIASES — prefer these in product code
     ======================================================== */

  /* Brand */
  --brand-primary:    var(--blue-500);
  --brand-primary-ink: var(--blue-600);
  --brand-secondary:  var(--teal-500);
  --brand-secondary-ink: var(--teal-600);
  --brand-accent:     var(--cyan-400);    /* aqua — stats, glows */
  --brand-warm:       var(--amber-400);

  /* Text */
  --text-heading: var(--navy-900);
  --text-body:    #2C3644;
  --text-muted:   var(--neutral-500);
  --text-faint:   var(--neutral-400);
  --text-inverse: #FFFFFF;
  --text-inverse-muted: rgba(255, 255, 255, 0.68);
  --text-link:    var(--blue-500);
  --text-link-hover: var(--blue-600);

  /* Surfaces */
  --surface-page:   #FFFFFF;
  --surface-subtle: var(--neutral-50);   /* soft off-white band */
  --surface-tint:   var(--mint-100);     /* soft mint band      */
  --surface-card:   #FFFFFF;
  --surface-dark:   var(--navy-900);     /* dark section / hero */
  --surface-dark-deep: var(--navy-950);
  --surface-inverse-card: var(--navy-800);

  /* Product-image tiles (transparent-background renders).
     Never pure white on large areas — reduces glare, keeps depth. */
  --surface-product:      #F1F5FB;   /* pale blue-gray (default) */
  --surface-product-soft: #F7F9FC;   /* soft cool white          */
  --surface-product-mist: #EEF2F7;   /* light mist               */

  /* Borders */
  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--blue-500);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Focus ring */
  --focus-ring: rgba(37, 99, 255, 0.40);

  /* Semantic status */
  --success:     var(--teal-500);
  --success-bg:  var(--teal-50);
  --warning:     var(--amber-400);
  --warning-bg:  var(--amber-100);
  --danger:      var(--red-500);
  --danger-bg:   var(--red-100);
  --info:        var(--blue-500);
  --info-bg:     var(--blue-50);

  /* ========================================================
     GRADIENTS — blue↔teal duo + aqua energy
     ======================================================== */
  --gradient-brand:   linear-gradient(120deg, var(--blue-500) 0%, var(--teal-500) 100%);
  --gradient-accent:  linear-gradient(120deg, var(--cyan-400) 0%, var(--blue-500) 100%);
  --gradient-primary: linear-gradient(180deg, #4C7BFF 0%, var(--blue-500) 100%);
  --gradient-hero:    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 52%, #16306B 130%);
  --gradient-glow:    radial-gradient(60% 80% at 80% 30%, rgba(0,194,255,0.26) 0%, rgba(37,99,255,0.12) 42%, transparent 72%); /* @kind color */
}