/* ============================================================
   Hogan Roofing — Radius, Shadow & Motion
   Warm-tinted shadows (brand is warm); confident, square-ish radii.
   ============================================================ */
:root {
  /* Corner radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Shadows — warm brown-black, never pure gray */
  --shadow-xs:  0 1px 2px rgba(30, 21, 14, 0.06);
  --shadow-sm:  0 1px 2px rgba(30, 21, 14, 0.06), 0 2px 6px rgba(30, 21, 14, 0.06);
  --shadow-md:  0 2px 4px rgba(30, 21, 14, 0.06), 0 6px 16px rgba(30, 21, 14, 0.08);
  --shadow-lg:  0 8px 28px rgba(30, 21, 14, 0.12), 0 2px 6px rgba(30, 21, 14, 0.06);
  --shadow-xl:  0 20px 48px rgba(30, 21, 14, 0.18), 0 4px 12px rgba(30, 21, 14, 0.08);
  --shadow-brand: 0 6px 18px rgba(240, 87, 47, 0.32); /* flame glow on primary CTAs */
  --shadow-inset: inset 0 1px 2px rgba(30, 21, 14, 0.07);

  /* Motion — quick, grounded, no bounce */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* Focus ring */
  --ring-width: 3px; /* @kind other */
  --ring-color: rgba(240, 87, 47, 0.35);
}