/* ==========================================================================
   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: #A65208;
  --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 */
  /* Colourful honeycomb cluster in the six logo colours — decorative only (CSS background, never read by AT). */
  --ss-hex-cluster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='589' height='448' viewBox='0 0 589 448'%3E%3Cpolygon points='295.0,30.0 295.0,82.0 250.0,108.0 205.0,82.0 205.0,30.0 250.0,4.0' fill='%23FCB615' fill-opacity='0.9'/%3E%3Cpolygon points='392.0,30.0 392.0,82.0 347.0,108.0 302.0,82.0 302.0,30.0 347.0,4.0' fill='%23CA3091' fill-opacity='0.75'/%3E%3Cpolygon points='246.5,114.0 246.5,166.0 201.5,192.0 156.5,166.0 156.5,114.0 201.5,88.0' fill='%238BC540' fill-opacity='0.85'/%3E%3Cpolygon points='343.5,114.0 343.5,166.0 298.5,192.0 253.5,166.0 253.5,114.0 298.5,88.0' fill='none' stroke='%231479BE' stroke-opacity='0.65' stroke-width='3'/%3E%3Cpolygon points='440.5,114.0 440.5,166.0 395.5,192.0 350.4,166.0 350.4,114.0 395.5,88.0' fill='%23F48024' fill-opacity='0.9'/%3E%3Cpolygon points='537.5,114.0 537.5,166.0 492.5,192.0 447.4,166.0 447.4,114.0 492.5,88.0' fill='%23EE4235' fill-opacity='0.7'/%3E%3Cpolygon points='295.0,198.0 295.0,250.0 250.0,276.0 205.0,250.0 205.0,198.0 250.0,172.0' fill='%23EE4235' fill-opacity='0.8'/%3E%3Cpolygon points='392.0,198.0 392.0,250.0 347.0,276.0 302.0,250.0 302.0,198.0 347.0,172.0' fill='none' stroke='%238BC540' stroke-opacity='0.6' stroke-width='3'/%3E%3Cpolygon points='489.0,198.0 489.0,250.0 444.0,276.0 398.9,250.0 398.9,198.0 444.0,172.0' fill='%23FCB615' fill-opacity='0.75'/%3E%3Cpolygon points='246.5,282.0 246.5,334.0 201.5,360.0 156.5,334.0 156.5,282.0 201.5,256.0' fill='none' stroke='%23CA3091' stroke-opacity='0.7' stroke-width='3'/%3E%3Cpolygon points='440.5,282.0 440.5,334.0 395.5,360.0 350.4,334.0 350.4,282.0 395.5,256.0' fill='%231479BE' fill-opacity='0.8'/%3E%3Cpolygon points='537.5,282.0 537.5,334.0 492.5,360.0 447.4,334.0 447.4,282.0 492.5,256.0' fill='none' stroke='%23F48024' stroke-opacity='0.65' stroke-width='3'/%3E%3Cpolygon points='295.0,366.0 295.0,418.0 250.0,444.0 205.0,418.0 205.0,366.0 250.0,340.0' fill='%238BC540' fill-opacity='0.65'/%3E%3C/svg%3E");
  --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 { position: relative; background: var(--ss-color-primary-deep); }
.ss-band--dark::before { content: ""; position: absolute; inset: 0; background: var(--ss-hex-cluster) right -70px top -40px / 380px no-repeat; opacity: .55; pointer-events: none; }
.ss-band--dark > * { position: relative; }
.ss-band--primary { position: relative; background: var(--ss-color-primary-deep); }
.ss-band--primary::before { content: ""; position: absolute; inset: 0; background: var(--ss-hex-cluster) left -90px bottom -80px / 300px no-repeat; opacity: .6; pointer-events: none; }
.ss-band--primary > * { position: relative; }
.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; }
}