/* JTR Electrical Services — "Live Current / Linear-electric" design system
   Re-skin 2026-06-03: Linear design system (design.md), re-tinted to JTR electric cyan.
   Inter Variable · near-black · single electric accent · translucent borders ·
   depth via luminance steps (not glow). NEVER hardcode hex in components — use these. */

:root{
  /* ---- type: Inter everywhere (Linear) ---- */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --fs-h1:    clamp(2.6rem, 5.6vw, 4.6rem);
  --fs-h2:    clamp(2rem, 3.6vw, 3rem);
  --fs-h3:    clamp(1.4rem, 2.2vw, 1.9rem);
  --fs-h4:    1.3rem;
  --fs-h5:    1.0625rem;
  --fs-lead:  clamp(1.02rem, 1.4vw, 1.18rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --tracking-display: -0.045em;   /* Linear: aggressive negative tracking at display sizes */
  --tracking-eyebrow: 0.04em;
  --leading-display:  1.0;
  --leading-body:     1.6;

  /* ---- colour: near-black + single electric-cyan accent ---- */
  --color-bg:            #070a0e;   /* marketing near-black, faint cool */
  --color-bg-2:          #0d1015;   /* panel */
  --color-surface:       #121821;   /* elevated surface (luminance step) */
  --color-surface-2:     #1a2330;   /* hover / higher elevation */
  --color-text:          #f4f8fc;   /* primary (not pure white) */
  --color-heading:       #f4f8fc;
  --color-text-2:        #cdd7e3;   /* body / secondary */
  --color-muted:         #8692a3;   /* tertiary */
  --color-faint:         #5d6675;   /* quaternary */

  --color-primary:       #29d3ff;   /* electric cyan accent */
  --color-primary-light: #7fe3ff;
  --color-primary-dark:  #11b8ff;   /* solid CTA */
  --color-accent:        #21a8ff;
  --color-success:       #27a644;

  /* lines & glass — translucent blue-tinted (Linear: whisper-thin) */
  --line:       rgba(90,190,255,.14);
  --line-soft:  rgba(90,190,255,.07);
  --glass:      rgba(255,255,255,.02);

  /* ---- spacing (8px grid) ---- */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px; --space-10:160px;
  --space-11:200px; --space-12:256px;

  /* ---- radius (Linear: small, precise) ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* ---- depth: luminance + thin border, minimal shadow ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: rgba(0,0,0,.4) 0 2px 4px, rgba(0,0,0,.2) 0 0 0 1px;
  --shadow-lg: rgba(0,0,0,.5) 0 8px 28px, 0 0 0 1px rgba(255,255,255,.05);
  --glow-blue: 0 0 0 1px rgba(41,211,255,.25);              /* restrained */
  --glow-cta:  0 0 0 1px rgba(41,211,255,.35), 0 6px 22px rgba(17,184,255,.32);

  /* ---- gradients ---- */
  --grad-text:  linear-gradient(120deg,#9bedff,#29d3ff 52%,#21a8ff);
  --grad-cta:   #11b8ff;   /* Linear keeps solid; glow does the work */
  --grad-atmos: radial-gradient(840px 480px at 88% -10%, rgba(41,211,255,.13), transparent 60%),
                radial-gradient(560px 440px at 2% 110%, rgba(17,184,255,.08), transparent 60%),
                var(--color-bg);

  --content-max: 1200px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}