/* ==========================================================================
   Design Tokens — epoxyfloornewjersey
   Extracted from Figma (Smart Leading Solutions / Epoxy Shine design)
   ========================================================================== */

:root {
  /* Brand — logo colors only: navy #03193C and orange #FE5C08. */
  --color-primary: #03193C;
  --color-primary-hover: #02122C;
  --color-primary-rgb: 3, 25, 60;

  --color-accent: #FE5C08;
  --color-accent-hover: #E04F00;
  --color-accent-rgb: 254, 92, 8;

  --color-text-dark: #2a2a2a;      /* Body heading text */
  --color-white: #ffffff;
  --color-border-light: rgba(255, 255, 255, 0.14); /* Outline buttons on dark bg */
  --color-text-muted: #6b7280;     /* Body copy on light backgrounds (adjust if Figma differs) */

  /* Typography */
  --font-display: 'Fraunces', serif;      /* Headings */
  --font-heading: var(--font-display);
  --font-body: 'Inter', sans-serif;       /* Body, buttons, UI */

  --fs-h1: 52.763px;
  --fs-h2: 45px;
  --fs-h3: 18.9px;
  --fs-h3-lg: 24px;
  --fs-body: 16px;
  --fs-body-sm: 14.1px;

  --fw-semibold: 600;
  --fw-regular: 400;

  /* Radius */
  --radius-button: 6px;
  --radius-card: 5px;
  --radius-pill: 18px;

  /* Spacing (base scale — adjust as needed per section) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* Layout — shared by top bar, nav, hero, and all .container sections */
  --container-width: 1370px;
  --container-width-wide: 1570px;
  --container-width-max: var(--container-width-wide); /* legacy alias */
  --container-max: var(--container-width); /* legacy alias */
  --container-padding: 24px;
  --logo-max-height: 80px;
}

/* Spacious layout on modern widescreen displays */
@media (min-width: 1600px) {
  :root {
    --container-width: var(--container-width-wide);
  }
}

@media (max-width: 992px) {
  :root {
    --container-padding: 24px;
    --fs-h1: 40px;
    --fs-h2: 34px;
  }
}

@media (max-width: 640px) {
  :root {
    --container-padding: 16px;
    --fs-h1: 32px;
    --fs-h2: 28px;
    --logo-max-height: 60px;
  }
}