/* =============================================================================
   C-Side Pressure Washing — CJS-style theme tokens
   Intake listed brand color as blue. No logo colors available yet, so this uses
   a clean coastal palette (deep navy + sea blue + bright teal accent) for the
   Winnabow / Cape Fear beach towns. Replace after logo review.
   ============================================================================= */

:root {
  /* Brand colors — coastal blue palette (chosen; intake only said "blue") */
  --color-primary: #0B3A5B;       /* deep coastal navy */
  --color-primary-dark: #06283F;  /* footer */
  --color-secondary: #176E97;     /* sea blue — phone / secondary CTAs (AA white) */
  --color-secondary-light: #3BA3C9; /* chevron / geometric accent */
  --color-accent: #0A7A94;        /* darker coastal teal — AA white text on CTAs */
  --color-accent-hover: #08657C;
  --color-black: #0a0e16;
  --color-white: #ffffff;
  --color-gray-soft: #E7E7E7;
  --color-gray-muted: #5a6a7a;
  --color-gray-bg: #f2f7fb;
  --color-overlay: rgba(11, 58, 91, 0.90);

  --color-text: var(--color-primary);
  --color-text-body: #1a2332;
  --color-text-on-dark: var(--color-white);
  --color-text-on-accent: var(--color-white);
  --color-link: var(--color-secondary);
  --color-border: var(--color-gray-soft);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-gray-bg);

  --font-display: "Audiowide", system-ui, sans-serif;
  --font-ui: "Urbanist", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-hero: clamp(1.75rem, 5.5vw, 3.55rem);
  --fs-h1: clamp(1.6rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.45rem, 3.2vw, 2.4rem);
  --fs-h3: clamp(1.05rem, 2vw, 1.35rem);
  --fs-eyebrow: 0.85rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-btn: 0.95rem;
  --lh-display: 1.15;
  --lh-body: 1.55;

  --max: 1140px;
  --header-h: 78px;
  --header-h-scrolled: 70px;
  --sticky-bar-h: 64px;
  --section-pad-y: clamp(2.5rem, 6vw, 5rem);
  --section-pad-x: clamp(1rem, 3vw, 1.5rem);
  --gap: 1.25rem;
  --radius: 0px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 28px rgba(11, 58, 91, 0.10);
  --shadow-header: 0 6px 18px rgba(0, 0, 0, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
  --dur-slow: 500ms;

  --ph-media-bg: #c5d4e0;
  --ph-media-fg: #4a5d70;
}

/* Accent CTAs: white text on teal (AA contrast) */
.btn--accent,
.btn--accent .btn__sub,
.cta-strip__item--accent,
.cta-strip__item--accent .cta-strip__title,
.cta-strip__item--accent .cta-strip__sub,
.sticky-bar__text,
.sticky-bar__text small {
  color: var(--color-text-on-accent) !important;
}
.btn--accent:hover,
.btn--accent:hover .btn__sub {
  background: var(--color-accent-hover);
  color: var(--color-text-on-accent) !important;
}
.sticky-bar__text {
  background: var(--color-accent) !important;
}

/* Kill muted opacity on colored CTAs so small text stays AA */
.btn--accent .btn__sub,
.btn--blue .btn__sub,
.header-cta .btn__sub,
.cta-strip__item--accent .cta-strip__sub,
.cta-strip__item--blue .cta-strip__sub,
.sticky-bar__text small,
.sticky-bar__call small {
  opacity: 1 !important;
}
.site-footer a {
  color: #ffffff !important;
}
.site-footer a:hover {
  color: #b8e0ec !important; /* light sea tint on dark footer, AA */
}