/*
 * Brand tokens - Shower Remodel Pros.
 *
 * Values come from the SRP design system generated off the approved homepage concept
 * (SRP - Homepage - BAM - MASTER / _ds/tokens/*.css) - not sampled from a screenshot.
 *
 * Two layers live here on purpose:
 *
 * 1. --srp-* : the design system. This is the source of truth. New work uses these.
 * 2. --hs-*  : legacy aliases inherited from the Hillstone starter theme, which main.css
 *              and the shared section templates still consume. They are kept so the
 *              starter's 1,800 lines of CSS did not have to be rewritten in one pass, and
 *              every one of them now points at an SRP value. Nothing here is maroon, gold
 *              or navy any more. Delete an alias only once nothing references it.
 */

:root {
  /* ---------------------------------------------------------------- palette */

  /* Electric sky blue: CTAs, links, icons and small accents only. Never a large
   * background - dark charcoal carries that role (see the design system readme). */
  --srp-accent-100: #eaf4fd; /* icon badge / tint fills */
  --srp-accent-300: #8fcbf4; /* eyebrows and accents ON dark */
  --srp-accent-500: #3fa1ea; /* primary accent */
  --srp-accent-600: #2b86ca; /* hover */

  --srp-white: #ffffff;

  --srp-ink-900: #111418; /* near-black: footer, trust strip, service area */
  --srp-ink-800: #23262b; /* charcoal: hero, process, consult CTA */
  --srp-ink-700: #2b2f36; /* card fill on charcoal */
  --srp-ink-600: #363b43; /* border on charcoal */
  --srp-ink-500: #2c3036; /* border/divider on near-black */
  --srp-ink-400: #1c1f24; /* chip fill on near-black */

  --srp-gray-050: #f7f9fb; /* muted section background */
  --srp-gray-100: #eef1f4; /* default border */
  --srp-gray-200: #dfe3e8; /* input border */
  --srp-gray-250: #fbfcfd; /* input fill */
  --srp-gray-400: #9aa1aa; /* placeholder / fine print */
  --srp-gray-500: #7d848d;
  --srp-gray-600: #6b7280;
  --srp-gray-700: #5b626b; /* body copy */

  --srp-ondark-100: #e6e9ec;
  --srp-ondark-200: #c3c8cf;
  --srp-ondark-300: #b7bdc5;

  /* ---- semantic ---- */
  --srp-surface-page: var(--srp-white);
  --srp-surface-muted: var(--srp-gray-050);
  --srp-surface-dark: var(--srp-ink-800);
  --srp-surface-darkest: var(--srp-ink-900);
  --srp-surface-dark-card: var(--srp-ink-700);
  --srp-surface-input: var(--srp-gray-250);

  --srp-border: var(--srp-gray-100);
  --srp-border-strong: var(--srp-gray-200);
  --srp-border-dark: var(--srp-ink-600);
  --srp-border-dark-muted: var(--srp-ink-500);

  --srp-text-heading: var(--srp-ink-900);
  --srp-text-body: var(--srp-gray-700);
  --srp-text-muted: var(--srp-gray-600);
  --srp-text-faint: var(--srp-gray-500);
  --srp-text-placeholder: var(--srp-gray-400);
  --srp-text-on-dark: var(--srp-white);
  --srp-text-on-dark-body: var(--srp-ondark-300);
  --srp-text-on-dark-body-strong: var(--srp-ondark-200);

  --srp-accent: var(--srp-accent-500);
  --srp-accent-hover: var(--srp-accent-600);
  --srp-accent-tint: var(--srp-accent-100);

  /* ---------------------------------------------------------------- type */

  --srp-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --srp-font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Headings never exceed 700; display numerals use the serif at 700. */
  --srp-weight-regular: 400;
  --srp-weight-medium: 500;
  --srp-weight-semibold: 600;
  --srp-weight-bold: 700;
  --srp-weight-black: 800;

  --srp-leading-display: 1.06;
  --srp-leading-body: 1.6;

  /*
   * The concept is a fixed 1280px artboard, so every size below is authored as
   * clamp(mobile, fluid, <the exact design value>). At >=1240px each one resolves to the
   * design value to the pixel; below that they scale instead of overflowing, which the
   * flat design has no answer for.
   */
  --srp-text-h1: clamp(2.25rem, 1.35rem + 3.4vw, 3.75rem);   /* 60px */
  --srp-text-h2: clamp(1.85rem, 1.4rem + 1.9vw, 2.75rem);    /* 44px */
  --srp-text-h2-lg: clamp(1.95rem, 1.45rem + 2.1vw, 2.875rem); /* 46px */
  --srp-text-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.625rem);    /* 26px */
  --srp-text-h4: clamp(1.25rem, 1.13rem + 0.5vw, 1.375rem);  /* 22px */
  --srp-text-num: clamp(2.5rem, 1.9rem + 1.6vw, 3.25rem);    /* 52px */

  --srp-text-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.15625rem); /* 18.5px */
  --srp-text-body-md: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);     /* 17px */
  --srp-text-body: 0.96875rem;  /* 15.5px */
  --srp-text-body-sm: 0.90625rem; /* 14.5px */
  --srp-text-caption: 0.8125rem;  /* 13px */
  --srp-text-tiny: 0.75rem;       /* 12px */

  --srp-tracking-eyebrow: 0.12em;
  --srp-tracking-badge: 0.08em;

  /* ---------------------------------------------------------------- layout */

  --srp-container: 77.5rem; /* 1240px */
  --srp-container-medium: 60rem;
  --srp-container-narrow: 56.25rem; /* 900px - the FAQ column */
  --srp-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); /* -> 40px */

  --srp-section-y: clamp(3.5rem, 2.4rem + 3.2vw, 5.5rem);    /* -> 88px */
  --srp-section-y-sm: clamp(2.75rem, 2rem + 2.4vw, 4rem);    /* -> 64px */
  --srp-section-y-lg: clamp(4.5rem, 3rem + 4.5vw, 7rem);

  /* ---------------------------------------------------------------- effects */

  --srp-radius-sm: 10px;  /* inputs */
  --srp-radius-md: 12px;  /* buttons */
  --srp-radius-lg: 14px;
  --srp-radius-xl: 18px;  /* cards */
  --srp-radius-2xl: 20px; /* image frames, form panel */
  --srp-radius-pill: 100px;

  --srp-shadow-card: 0 2px 10px rgba(17, 20, 24, 0.04);
  --srp-shadow-card-hover: 0 18px 44px rgba(17, 20, 24, 0.12);
  --srp-shadow-image-md: 0 14px 40px rgba(17, 20, 24, 0.35);
  --srp-shadow-image-lg: 0 24px 60px rgba(17, 20, 24, 0.18);
  --srp-shadow-image-xl: 0 24px 60px rgba(0, 0, 0, 0.4);
  --srp-shadow-panel: 0 30px 70px rgba(0, 0, 0, 0.4);
  --srp-shadow-accent: 0 10px 28px rgba(63, 161, 234, 0.35);
  --srp-shadow-accent-sm: 0 6px 18px rgba(63, 161, 234, 0.28);

  --srp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --srp-duration-fast: 0.2s;
  --srp-duration-base: 0.28s;

  /* Sticky header height, used for scroll-margin so anchor links clear the nav. */
  --srp-header-h: 5.125rem; /* 82px */

  /* ============================================================== */
  /* Legacy --hs-* aliases. See the note at the top of this file.    */
  /* ============================================================== */

  --hs-white: var(--srp-white);
  --hs-gold: var(--srp-accent-500);       /* was #cf9e2a - now the SRP accent */
  --hs-gold-light: var(--srp-accent-300);
  --hs-maroon: var(--srp-ink-800);        /* "dark" sections: charcoal, not maroon */
  --hs-navy: var(--srp-ink-900);          /* "black" sections + body ink */
  --hs-teal: var(--srp-accent-500);
  --hs-coral: var(--srp-accent-300);
  --hs-cream: var(--srp-gray-050);

  --hs-text: var(--srp-text-heading);
  --hs-text-muted: var(--srp-text-muted);
  --hs-rule: var(--srp-border);

  --hs-font-heading: var(--srp-font-display);
  --hs-font-body: var(--srp-font-body);
  --hs-weight-heading: var(--srp-weight-semibold);
  --hs-weight-body: var(--srp-weight-regular);
  --hs-weight-meta: var(--srp-weight-bold);
  --hs-leading-heading: var(--srp-leading-display);
  --hs-leading-body: var(--srp-leading-body);

  --hs-h1: var(--srp-text-h1);
  --hs-h2: var(--srp-text-h2);
  --hs-h3: var(--srp-text-h3);
  --hs-h4: var(--srp-text-h4);
  --hs-body: var(--srp-text-body-md);
  --hs-small: var(--srp-text-body-sm);
  --hs-large: var(--srp-text-body-lg);

  --hs-width-narrow: var(--srp-container-narrow);
  --hs-width-medium: var(--srp-container-medium);
  --hs-width-wide: var(--srp-container);
  --hs-gutter: var(--srp-gutter);

  --hs-space-small: var(--srp-section-y-sm);
  --hs-space-medium: var(--srp-section-y);
  --hs-space-large: var(--srp-section-y-lg);

  --hs-radius: var(--srp-radius-xl);
  --hs-radius-pill: var(--srp-radius-pill);
  --hs-shadow: var(--srp-shadow-card);
  --hs-transition: var(--srp-duration-fast) var(--srp-ease);
}

/*
 * Section colour themes.
 *
 * The ACF theme selector and inc/sections.php are inherited from the starter, which mirrored
 * Squarespace's seven theme slots. Those slot NAMES are kept so the rendering code did not
 * need changing, but each one is remapped onto the SRP palette's four section "beats":
 * white -> light gray -> charcoal -> near-black.
 */
.hs-section[data-theme='white'] {
  --section-bg: var(--srp-white);
  --section-fg: var(--srp-text-heading);
  --section-body: var(--srp-text-body);
  --section-accent: var(--srp-accent-500);
  --section-border: var(--srp-border);
  --section-card-bg: var(--srp-gray-050);
}

.hs-section[data-theme='light'] {
  --section-bg: var(--srp-gray-050);
  --section-fg: var(--srp-text-heading);
  --section-body: var(--srp-text-body);
  --section-accent: var(--srp-accent-500);
  --section-border: var(--srp-border);
  --section-card-bg: var(--srp-white);
}

/* "bright" is the accent TINT, not the accent itself - large flat blue is off-brand. */
.hs-section[data-theme='bright'] {
  --section-bg: var(--srp-accent-100);
  --section-fg: var(--srp-text-heading);
  --section-body: var(--srp-text-body);
  --section-accent: var(--srp-accent-600);
  --section-border: #cfe4f7;
  --section-card-bg: var(--srp-white);
}

.hs-section[data-theme='dark'],
.hs-section[data-theme='dark-bold'] {
  --section-bg: var(--srp-ink-800);
  --section-fg: var(--srp-white);
  --section-body: var(--srp-ondark-300);
  --section-accent: var(--srp-accent-300);
  --section-border: var(--srp-ink-600);
  --section-card-bg: var(--srp-ink-700);
}

.hs-section[data-theme='black'],
.hs-section[data-theme='black-bold'] {
  --section-bg: var(--srp-ink-900);
  --section-fg: var(--srp-white);
  --section-body: var(--srp-ondark-200);
  --section-accent: var(--srp-accent-300);
  --section-border: var(--srp-ink-500);
  --section-card-bg: var(--srp-ink-400);
}

/*
 * The starter used -bold to mean "heading in the accent colour". SRP headings are always
 * white on dark - the accent is reserved for eyebrows, icons and CTAs - so the two variants
 * are deliberately identical here and --heading-color is left unset.
 */