/* =====================================================================
   Valhalla Pressure Washing — DESIGN TOKENS
   Change the brand here; every component reads from these variables.
   Never hard-code a color, font, spacing, radius or shadow in a component.
   ===================================================================== */
:root{
  /* --- Color: surfaces --- */
  --c-bg:            #05070c;   /* page background (near-black from flyer) */
  --c-bg-2:          #0b0f18;   /* header/footer */
  --c-panel:         #10151f;   /* card base */
  --c-panel-2:       #161c29;   /* card top / input hover */
  --c-line:          #222a3a;   /* hairline borders */
  --c-line-2:        #2f3b55;   /* hover borders */

  /* --- Color: brand --- */
  --c-brand:         #1b5ed3;   /* Valhalla blue (flyer) */
  --c-brand-hot:     #3b8bff;   /* electric highlight / links */
  --c-brand-deep:    #0d2f6e;   /* deep blue for gradients */
  --c-brand-tint:    rgba(59,139,255,.12);
  --c-brand-glow:    rgba(59,139,255,.35);

  /* --- Color: text --- */
  --c-text:          #d9dee8;   /* silver body text */
  --c-text-2:        #aeb6c6;   /* secondary */
  --c-text-mute:     #7c869b;   /* notes / captions */
  --c-text-strong:   #f6f8fc;   /* headings */
  --c-on-brand:      #ffffff;   /* text on blue */
  --c-on-brand-soft: #cfe0ff;

  /* --- Color: feedback --- */
  --c-success:       #35c46a;
  --c-warn:          #f2b544;
  --c-danger:        #ff5d5d;

  /* --- Steel text gradient (wordmark effect) --- */
  --g-steel: linear-gradient(180deg,#fff 0%,#cfd6e3 45%,#8e99ad 50%,#e6ebf4 100%);
  --g-brand: linear-gradient(180deg,var(--c-brand-hot),var(--c-brand));
  --g-brand-wide: linear-gradient(100deg,var(--c-brand) 0%,#1549a8 100%);
  --g-strip: linear-gradient(90deg,var(--c-brand-deep),var(--c-brand) 50%,var(--c-brand-deep));
  --g-card: linear-gradient(180deg,var(--c-panel-2),var(--c-panel));

  /* --- Typography --- */
  --f-display: "Anton","Impact","Arial Narrow",sans-serif;          /* headlines, prices */
  --f-cond:    "Barlow Condensed","Arial Narrow",sans-serif;         /* labels, nav, buttons */
  --f-body:    "Barlow","Helvetica Neue",Arial,sans-serif;           /* body copy */
  --fs-xs: .8rem; --fs-sm: .9rem; --fs-base: 1.0625rem; --fs-md: 1.15rem; --fs-lg: 1.35rem;
  --fs-h3: clamp(1.25rem,2.4vw,1.6rem);
  --fs-h2: clamp(1.9rem,4.2vw,3rem);
  --fs-h1: clamp(2.4rem,6vw,4.6rem);
  --fs-price: 2.8rem;
  --lh-tight: 1.02; --lh-body: 1.6;
  --ls-display: .02em; --ls-label: .12em; --ls-kicker: .18em;

  /* --- Spacing (4px base) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-section: clamp(56px,8vw,104px);
  --sp-gutter:  clamp(16px,4vw,40px);
  --sp-gap:     clamp(24px,5vw,64px);

  /* --- Shape --- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;
  --container: 1180px;

  /* --- Elevation --- */
  --sh-card:  0 30px 80px rgba(0,0,0,.7), 0 0 0 1px var(--c-line);
  --sh-brand: 0 6px 22px var(--c-brand-glow), inset 0 1px 0 rgba(255,255,255,.25);
  --sh-brand-hover: 0 10px 30px var(--c-brand-glow);
  --sh-special: 0 10px 40px var(--c-brand-glow);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: .15s; --t-base: .2s; --t-slow: .6s;

  /* --- Layers --- */
  --z-header: 50; --z-callbar: 60; --z-skip: 100;

  /* --- Atmosphere --- */
  --bg-glow: radial-gradient(900px 500px at 15% -10%, rgba(27,94,211,.22), transparent 60%),
             radial-gradient(700px 500px at 95% 10%, rgba(27,94,211,.12), transparent 60%);
  --noise-opacity: .07;
}