/* RM Removals — design tokens
   Family: stripe-elegant (light, professional, trust-forward)
   Benchmark exemplar: Stripe (~/design.md)
   Brand-tinted to RM Removals navy (#17274d) + red (#E0301E). */

:root {
  /* ── Palette (8-token + helpers) ───────────────────────────── */
  --color-primary:        #17274d;   /* RM navy */
  --color-primary-dark:   #0e1a33;   /* deep navy — footer, stage */
  --color-primary-light:  #2f4d86;   /* lifted navy — accents on dark */
  --color-accent:         #E0301E;   /* RM red */
  --color-accent-dark:    #b71f12;   /* red hover/pressed */
  --color-bg:             #ffffff;
  --color-surface:        #f5f8fc;   /* alt sections, cards */
  --color-text:           #16233f;   /* deep navy ink, not black */
  --color-muted:          #5b6b88;   /* secondary text */
  --color-line:           #e4ebf4;   /* hairline borders */

  /* ── Type ──────────────────────────────────────────────────── */
  --font-display: "Plus Jakarta Sans", "Inter Display", Inter, system-ui, sans-serif;
  --font-body:    Inter, system-ui, sans-serif;
  --fs-h1:    clamp(2.7rem, 5.4vw, 4.4rem);
  --fs-h2:    clamp(2rem, 3.6vw, 3rem);
  --fs-h3:    1.6rem;
  --fs-h4:    1.3rem;
  --fs-h5:    1.075rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --tracking-display: -0.035em;
  --leading-display:  1.04;
  --leading-body:     1.65;

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

  /* ── Radius ─────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* ── Shadows (navy-tinted, layered) ─────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(22,35,63,.05), 0 1px 3px rgba(22,35,63,.07);
  --shadow-md: 0 10px 26px -12px rgba(22,35,63,.20), 0 4px 10px -6px rgba(22,35,63,.10);
  --shadow-lg: 0 34px 64px -30px rgba(22,35,63,.32), 0 12px 28px -16px rgba(22,35,63,.16);
  --shadow-red: 0 16px 34px -14px rgba(224,48,30,.45);

  /* ── Hero gradient — navy + red radials ─────────────────────── */
  --gradient-hero:
    radial-gradient(820px 520px at 86% -6%,  rgba(224,48,30,.10), transparent 60%),
    radial-gradient(900px 620px at -6% 8%,   rgba(23,39,77,.12),  transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3f6fc 100%);
}