/* ==========================================================================
   Mass Green Insulation — Theme tokens
   Change brand colors, fonts, radii and spacing here. Every other file
   reads these variables, so this is the only place you need to edit.
   ========================================================================== */

:root {
  /* ---- Brand color (swap these to re-brand the whole site) ---- */
  --brand-green: #14562b;          /* main brand color: buttons, links, icons */
  --brand-green-hover: #0e4120;    /* button hover */
  --brand-green-bright: #5cb97f;   /* accent used on dark backgrounds */
  --brand-green-tint: #e4eee7;     /* soft backgrounds (icon chips) */
  --brand-green-ring: rgba(20, 86, 43, 0.2); /* focus glow on form fields */

  /* ---- Neutrals ---- */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f7;
  --color-bg-dark: #02633d;
  --color-bg-dark-alt: #161617;
  --color-surface: #ffffff;
  --color-surface-dark: #161617;
  --hero-bg: #ffffff;              /* must match the frames' background (and `background` in js/main.js) */

  --color-text: #1d1d1f;
  --color-text-muted: #6e6e73;
  --color-text-inverse: #f5f5f7;
  --color-text-inverse-muted: #a1a1a6;

  --color-border: #d2d2d7;
  --color-border-dark: #424245;

  --color-error: #d70015;
  --color-success: var(--brand-green);

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2rem, 4.4vw, 4.25rem);
  --fs-display: clamp(2.25rem, 6vw, 4.5rem);
  --fs-title: clamp(1.75rem, 4vw, 3rem);
  --fs-lead: clamp(1.125rem, 2vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* ---- Shape & spacing ---- */
  --radius-card: 28px;
  --radius-media: 20px;
  --radius-input: 14px;
  --radius-pill: 980px;

  --nav-height: 52px;       /* navbar after scrolling */
  --nav-height-lg: 76px;    /* navbar at the top of the page */
  --nav-logo: 36px;         /* logo height after scrolling */
  --nav-logo-lg: 50px;      /* logo height at the top of the page */
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1120px;
  --section-pad: clamp(88px, 12vw, 168px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 900ms;
}

@media (max-width: 767px) {
  :root {
    --nav-height-lg: 64px;
    --nav-logo-lg: 40px;
  }
}