/* ===== SCALEX INFINITY — COLOR TOKENS =====
   Original palette inspired by the ScaleX infinity mark: deep engineering
   navy grounded by an electric blue, lifted by an engineering cyan.
   HEX | RGB | HSL documented inline for every base token. */
:root{
  /* ---- Navy (structure, dark surfaces) ---- */
  --navy-950:#05080F; /* rgb(5,8,15)   hsl(222,50%,4%)  */
  --navy-900:#080D18; /* rgb(8,13,24)  hsl(221,50%,6%)  */
  --navy-800:#0D1424; /* rgb(13,20,36) hsl(222,47%,10%) */
  --navy-700:#141D33; /* rgb(20,29,51) hsl(223,44%,14%) */

  /* ---- Primary Blue / Electric Blue ---- */
  --blue-700:#1E3FCC; /* rgb(30,63,204)  hsl(229,74%,46%) */
  --blue-600:#2A50E8; /* rgb(42,80,232)  hsl(228,81%,54%) — Primary Blue */
  --blue-500:#3E6BFF; /* rgb(62,107,255) hsl(226,100%,62%) — Electric Blue */
  --blue-400:#6E8FFF; /* rgb(110,143,255) hsl(226,100%,72%) */

  /* ---- Engineering Cyan ---- */
  --cyan-500:#0FB8D4; /* rgb(15,184,212) hsl(189,87%,45%) */
  --cyan-400:#2CD6EE; /* rgb(44,214,238) hsl(187,85%,55%) */
  --cyan-300:#7FE7F5; /* rgb(127,231,245) hsl(187,86%,73%) */

  /* ---- Steel Gray / Titanium / Silver ---- */
  --steel-600:#4B5361;  /* rgb(75,83,97)   hsl(218,13%,34%) */
  --steel-500:#6B7481;  /* rgb(107,116,129) hsl(215,9%,46%) */
  --steel-400:#8B93A0;  /* rgb(139,147,160) hsl(217,10%,59%) */
  --steel-300:#AEB5C0;  /* rgb(174,181,192) hsl(217,12%,72%) */
  --titanium-200:#C7CCD4; /* rgb(199,204,212) hsl(217,13%,81%) */
  --silver-100:#E2E5EA;   /* rgb(226,229,234) hsl(217,16%,90%) */

  /* ---- White / Off-white / Glass ---- */
  --white:#FFFFFF;
  --offwhite:#FAF8F3;   /* rgb(250,248,243) hsl(43,41%,97%) — Warm Off-white */
  --glass-white-06:rgba(255,255,255,0.06);
  --glass-white-10:rgba(255,255,255,0.10);
  --glass-white-16:rgba(255,255,255,0.16);
  --glass-navy-60:rgba(5,8,15,0.60);
  --glass-navy-80:rgba(5,8,15,0.80);

  /* ---- Industrial Orange (very limited — alerts/CTAs of last resort) ---- */
  --orange-500:#FF6B35; /* rgb(255,107,53) hsl(16,100%,60%) */

  /* ---- Semantic status ---- */
  --success-500:#1FC48C; /* rgb(31,196,140) hsl(160,73%,45%) */
  --warning-500:#F2A93B; /* rgb(242,169,59) hsl(36,88%,59%) */
  --danger-500:#EA4B4B;  /* rgb(234,75,75)  hsl(0,79%,61%) */

  /* ---- Gradient library ---- */
  --gradient-infinity: linear-gradient(120deg, var(--blue-600) 0%, var(--blue-500) 45%, var(--cyan-400) 100%);
  --gradient-infinity-soft: linear-gradient(120deg, rgba(42,80,232,0.16) 0%, rgba(44,214,238,0.10) 100%); /* @kind color */
  --gradient-navy-depth: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  --gradient-mesh: radial-gradient(circle at 15% 20%, rgba(62,107,255,0.25), transparent 45%), radial-gradient(circle at 85% 75%, rgba(44,214,238,0.18), transparent 50%), var(--navy-950);
  --gradient-titanium: linear-gradient(160deg, var(--silver-100) 0%, var(--titanium-200) 50%, var(--steel-400) 100%);

  /* ---- Semantic aliases: DARK theme (default brand surface) ---- */
  --bg-canvas: var(--navy-950);
  --bg-surface: var(--navy-900);
  --bg-surface-raised: var(--navy-800);
  --bg-surface-glass: var(--glass-white-06);
  --border-subtle: rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.24);
  --text-primary: var(--white);
  --text-secondary: var(--titanium-200);
  --text-tertiary: var(--steel-400);
  --text-on-accent: var(--white);
  --accent-primary: var(--blue-500);
  --accent-primary-hover: var(--blue-400);
  --accent-primary-active: var(--blue-700);
  --accent-secondary: var(--cyan-400);
  --focus-ring: var(--cyan-400);

  /* ---- Semantic aliases: LIGHT theme ---- */
  --bg-canvas-light: var(--offwhite);
  --bg-surface-light: var(--white);
  --bg-surface-raised-light: var(--white);
  --border-subtle-light: rgba(13,20,36,0.08);
  --border-default-light: rgba(13,20,36,0.14);
  --text-primary-light: var(--navy-950);
  --text-secondary-light: var(--steel-600);
  --text-tertiary-light: var(--steel-500);
}
/* Accessibility variants: min 4.5:1 body text.
   --text-primary on --bg-canvas = 19.4:1. --text-secondary on --bg-canvas = 10.8:1.
   --accent-primary on --white = 4.6:1 (AA for text ≥14px bold / ≥18px regular; use --blue-700 for small AA body links on white). */
:root{ --accent-primary-on-light: var(--blue-700); }