:root {
/* Brand colors */
--y: #FFE135; /* sunshine yellow — accents, chips */
--pk: #FF4EB8; /* hot pink — primary CTA, badges, active */
--bl: #4ECAFF; /* sky blue — soft fills, input header */
--el: #2B6BFF; /* electric blue — premium accent, links, focus, gradients */
--el-deep: #1E50D8; /* electric blue, pressed/contrast */
--mt: #3DFFB0; /* mint green — success, free badges */
--or: #FF7A35; /* orange — hot badges, secondary accents */
--pu: #2B6BFF; /* legacy name → now electric blue (no purple anywhere) */
--cr: #FFFBF0; /* warm cream — page bg, hero bg */
--wh: #FFFFFF;
--ink: #11121A; /* near-black — borders, text, shadows */
--soft:#52526E; /* muted slate — secondary text */
--line: rgba(17,18,26,.10); /* hairline dividers */
--red: #FF3B3B; /* live dot pulse */
--green:#00C853; /* ready states */

/* Border & shadow system */
--bw: 3px;
--r: 16px;
--sh: 5px 5px 0 var(--ink);
--shb: 7px 7px 0 var(--ink);
/* premium soft elevation (paired with the brutalist offset on hero surfaces) */
--soft1: 0 2px 8px rgba(17,18,26,.05);
--soft2: 0 12px 34px rgba(17,18,26,.10);
--soft3: 0 28px 70px rgba(17,18,26,.14);
--ring: 0 0 0 4px rgba(43,107,255,.18); /* focus ring */

/* Type */
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Nunito', sans-serif;
--font-mono: 'Space Mono', monospace;

/* WebGL shader CSS fallback — keep in sync with PALETTE in js/hero-shader.js */
--shader-fallback: #f9f9f9 linear-gradient(180deg,
  #FFFBF0 0%, #FFE135 12%, #3DFFB0 24%, #FF7A35 38%, #FF4EB8 52%,
  #4ECAFF 68%, #2B6BFF 84%, #11121A 100%);
}

/* Shader mount targets: one fallback gradient, hidden once the canvas is live */
.shader-bg { background: var(--shader-fallback); }
.shader-bg.shader-live { background: none; }
.shader-bg canvas { display: block; width: 100% !important; height: 100% !important; }