/* ===========================================================================
   Matt's Electric — design tokens.

   The palette is the logo's: Matt's blue (#03527B) and the spark yellow of
   its bolt and plug (#FCDC25), on bright white and a soft blue mist. Deep
   navy is for text, never for big areas. Current cyan is the light of the
   lines in the hero, used for glows and live states only.

   Type: Barlow Condensed for display (utility-sign caps), Barlow for text,
   JetBrains Mono for breaker labels and kickers. All self-hosted
   (01-fonts.css).

   90-wide.css re-declares the layout tokens for big screens; it loads last.
   =========================================================================== */

:root{
  /* brand */
  --blue:#03527B;
  --blue-hi:#0A6C9F;
  --blue-lo:#023B59;
  --spark:#FCDC25;
  --spark-hi:#FFE95E;
  --spark-lo:#E2C200;
  --current:#36C5F0;
  --current-hi:#9BE8FF;
  --ok:#3BE37A;
  --warn:#FF9F43;
  --trip:#FF5A5F;

  /* night (dark grounds) */
  --night:#07111E;
  --night-2:#0B1A2B;
  --night-3:#10243A;
  --steel:#13283E;
  --steel-2:#1B344D;

  /* light grounds */
  --white:#FFFFFF;
  --paper:#FFFFFF;
  --mist:#F3F7FB;
  --sky:#E5F0F8;
  --cloud:#EAF1F7;

  /* text */
  --text:#0B2236;
  --text-2:#43566A;
  --muted:#5E7083;
  --on-dark:#E9F2FA;
  --on-dark-2:#B9CAD9;
  --on-dark-3:#90A4B7;

  /* lines */
  --line:#E1E9F0;
  --line-strong:#C9D6E2;
  --line-dark:rgba(159,216,255,.12);
  --line-dark-strong:rgba(159,216,255,.26);

  /* type */
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-text:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-hero:clamp(2.8rem, 1.6rem + 5.2vw, 6.3rem);
  --fs-h1:clamp(2.5rem, 1.6rem + 3.9vw, 5.1rem);
  --fs-h2:clamp(2.1rem, 1.4rem + 2.7vw, 3.85rem);
  --fs-h3:clamp(1.4rem, 1.25rem + .5vw, 1.75rem);
  --fs-lede:clamp(1.1rem, 1rem + .45vw, 1.34rem);
  --fs-body:1.0625rem;
  --fs-kicker:.78rem;
  --lh-display:.96;

  /* layout */
  --container:1240px;
  --gutter:clamp(1.1rem, 3.4vw, 2.5rem);
  --section-y:clamp(4.5rem, 3rem + 5vw, 8rem);
  --section-y-tight:clamp(3rem, 2rem + 3vw, 5rem);
  --mel-gap:clamp(1rem, 2vw, 1.75rem);
  --header-h:86px;
  --topbar-h:40px;

  /* shape */
  --r-sm:10px;
  --r:16px;
  --r-lg:26px;
  --pill:999px;

  /* depth */
  --shadow-1:0 1px 2px rgba(11,34,54,.05),0 8px 24px -12px rgba(11,34,54,.14);
  --shadow-2:0 2px 6px rgba(11,34,54,.05),0 30px 60px -28px rgba(11,34,54,.30);
  --shadow-blue:0 24px 50px -24px rgba(3,82,123,.55);
  --shadow-spark:0 12px 32px -12px rgba(252,220,37,.7);
  --glow-current:0 0 0 1px rgba(54,197,240,.4),0 0 26px rgba(54,197,240,.32);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* brand gradients */
  --grad-blue:linear-gradient(135deg,#0A79B5 0%,#03527B 55%,#023F61 100%);
  --grad-spark:linear-gradient(90deg,var(--blue),var(--current),var(--spark));
}