/* ==========================================================================
   Safe & Sound Hillsborough — Design Tokens
   Single source of truth for color, type, space, radius, shadow, motion.
   Elementor Global Colors/Fonts are synced to these on theme activation
   (inc/elementor.php) so edits in Elementor and in CSS stay aligned.
   Brand colors were sampled from the official logo file (2026-11-07).
   ========================================================================== */
:root {
  /* --- Brand (from logo) --- */
  --ss-color-primary: #1479BE;        /* logo blue  — links, primary buttons */
  --ss-color-primary-dark: #0F5F94;   /* hover / pressed */
  --ss-color-primary-deep: #0A3F63;   /* dark bands, footer */
  --ss-color-primary-tint: #E8F2FA;   /* light blue surfaces */
  --ss-color-red: #EE4235;
  --ss-color-orange: #F48024;
  --ss-color-yellow: #FCB615;
  --ss-color-magenta: #CA3091;
  --ss-color-green: #8BC540;

  /* Accessible text-on-white variants of the accents (≥ 4.5:1) */
  --ss-color-red-text: #C9281C;
  --ss-color-orange-text: #B85A0A;
  --ss-color-yellow-text: #8A5A00;
  --ss-color-magenta-text: #A2246F;
  --ss-color-green-text: #4E7A1D;

  /* --- Neutrals --- */
  --ss-color-text: #20242B;           /* charcoal — body & headings */
  --ss-color-text-muted: #5B6470;     /* 5.9:1 on white */
  --ss-color-text-inverse: #FFFFFF;
  --ss-color-bg: #FFFFFF;
  --ss-color-surface: #F7F8FA;        /* light background */
  --ss-color-surface-warm: #FBF8F3;   /* warm neutral band */
  --ss-hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='254' viewBox='0 0 220 254'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2'%3E%3Cpath d='M110 2l94 54v108l-94 54-94-54V56z'/%3E%3Cpath d='M110 50l52 30v60l-52 30-52-30V80z'/%3E%3C/g%3E%3C/svg%3E");
  --ss-color-border: #E3E6EA;
  --ss-color-border-strong: #C9CED6;

  /* --- Typography --- */
  --ss-font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;   /* big statements, uppercase */
  --ss-font-heading: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif; /* h3–h6, buttons, nav */
  --ss-font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid type scale (min 360px → max 1280px viewport) */
  --ss-text-xs: 0.8125rem;
  --ss-text-sm: 0.9375rem;
  --ss-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --ss-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --ss-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --ss-text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --ss-text-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --ss-text-4xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --ss-text-display: clamp(2.75rem, 1.9rem + 3.8vw, 5rem);

  --ss-weight-regular: 400;
  --ss-weight-semibold: 600;
  --ss-weight-bold: 700;
  --ss-weight-extrabold: 800;

  --ss-leading-tight: 1.1;
  --ss-leading-snug: 1.25;
  --ss-leading-normal: 1.55;
  --ss-leading-relaxed: 1.7;

  --ss-tracking-wide: 0.08em;
  --ss-measure: 68ch;                 /* comfortable line length for prose */

  /* --- Spacing (4px base) --- */
  --ss-space-1: 0.25rem;
  --ss-space-2: 0.5rem;
  --ss-space-3: 0.75rem;
  --ss-space-4: 1rem;
  --ss-space-5: 1.5rem;
  --ss-space-6: 2rem;
  --ss-space-7: 3rem;
  --ss-space-8: 4rem;
  --ss-space-9: 6rem;
  --ss-section: clamp(3rem, 2rem + 4vw, 6rem);   /* vertical rhythm between page sections */
  --ss-gutter: clamp(1.25rem, 1rem + 1.5vw, 2rem);

  /* --- Layout --- */
  --ss-container: 1200px;
  --ss-container-narrow: 760px;
  --ss-container-wide: 1400px;
  --ss-header-height: 84px;

  /* --- Radius / shadow --- */
  --ss-radius-sm: 8px;      /* buttons, inputs, chips */
  --ss-radius-md: 16px;     /* cards, media */
  --ss-radius-lg: 28px;     /* tiles, feature imagery, campaign block */
  --ss-radius-shape: 28px 8px 28px 8px;   /* signature "leaf" corner shape used on tiles */
  --ss-radius-pill: 999px;
  --ss-shadow-sm: 0 1px 2px rgba(32, 36, 43, 0.06), 0 1px 3px rgba(32, 36, 43, 0.08);
  --ss-shadow-md: 0 8px 24px rgba(32, 36, 43, 0.10);
  --ss-shadow-lg: 0 20px 48px rgba(32, 36, 43, 0.16);

  /* --- Motion --- */
  --ss-duration: 180ms;
  --ss-ease: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- Focus --- */
  --ss-focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--ss-color-primary);

  /* --- Breakpoints (reference only; CSS can't use vars in @media) ---
     sm 640px · md 768px · lg 1024px (Elementor tablet ≤1024) · xl 1280px */
}

/* Dark band context: anything placed inside .ss-band--dark flips text tokens. */
.ss-band--dark, .ss-band--primary {
  --ss-color-text: #FFFFFF;
  --ss-color-text-muted: rgba(255, 255, 255, 0.78);
  --ss-color-border: rgba(255, 255, 255, 0.18);
  color: var(--ss-color-text);
}
.ss-band--dark { background: var(--ss-color-primary-deep) var(--ss-hex-pattern) right -80px top -40px / 300px no-repeat; }
.ss-band--primary { background: var(--ss-color-primary) var(--ss-hex-pattern) left -80px bottom -60px / 260px no-repeat; }
.ss-band--surface { background: var(--ss-color-surface); }
.ss-band--warm { background: var(--ss-color-surface-warm); }

@media (prefers-reduced-motion: reduce) {
  :root { --ss-duration: 0ms; --ss-ease: 0ms linear; }
}