/* WindshieldHUB design tokens — extracted from the approved blog homepage design.
   Load this file BEFORE header-styles.css / footer-styles.css. */
/* Font: Mulish. PRODUCTION self-hosts WOFF2 with font-display swap (see the production
   IMPLEMENTATION-GUIDE); until the licensed files are supplied, the stack below falls back
   to system fonts. Claude previews load Google Fonts via a PREVIEW-ONLY <link>. */

:root {
  /* Brand color */
  --whub-navy: #053b59;          /* primary dark navy */
  --whub-navy-hover: #0a4a6e;
  --whub-navy-card: #0e3a5c;     /* drawer quote button */
  --whub-blue: #0899cd;          /* WindshieldHUB blue */
  --whub-blue-hover: #077fb0;
  --whub-accent: #067ba6;        /* accent / link blue */
  --whub-action: #067ba6;        /* accessible action blue — filled CTAs with white text (≥4.5:1 AA) */
  --whub-action-hover: #05628a;
  --whub-link-hover: #053b59;

  /* Text */
  --whub-text: #14262f;
  --whub-heading: #0f2430;
  --whub-text-strong: #2c3e4a;
  --whub-text-body: #3d5260;
  --whub-text-muted: #5b6b76;
  --whub-text-faint: #8aa0ac;

  /* Text on navy */
  --whub-on-navy: #ffffff;
  --whub-on-navy-soft: #c3dcea;
  --whub-on-navy-muted: #9dbfd2;
  --whub-on-navy-accent: #7fc9e8;

  /* Backgrounds */
  --whub-bg: #ffffff;
  --whub-bg-tint: #f4f9fb;
  --whub-bg-shell: #edf2f5;      /* footer outer shell */
  --whub-bg-ice: #e6f5fb;        /* light blue chip / hover fill */
  --whub-bg-card-soft: #f4f8fb;  /* drawer support card */

  /* Borders */
  --whub-border: #e3ebf0;
  --whub-border-strong: #cfe0e9;
  --whub-border-divider: #d3dee6;
  --whub-border-chip: #dde6ec;
  --whub-border-on-navy: #1a5074;
  --whub-border-card-soft: #e9f0f4;

  /* Type */
  --whub-font: 'Mulish', -apple-system, 'Segoe UI', sans-serif;
  --whub-weight-regular: 400;
  --whub-weight-semibold: 600;
  --whub-weight-bold: 700;
  --whub-weight-extrabold: 800;

  /* Spacing scale */
  --whub-space-1: 4px;
  --whub-space-2: 8px;
  --whub-space-3: 12px;
  --whub-space-4: 16px;
  --whub-space-5: 20px;
  --whub-space-6: 24px;
  --whub-space-8: 32px;
  --whub-space-10: 40px;
  --whub-space-12: 48px;
  --whub-space-16: 64px;

  /* Radii */
  --whub-radius-sm: 6px;
  --whub-radius-md: 8px;
  --whub-radius-lg: 12px;
  --whub-radius-xl: 14px;
  --whub-radius-2xl: 16px;
  --whub-radius-pill: 999px;

  /* Shadows */
  --whub-shadow-sm: 0 4px 18px rgba(5, 59, 89, 0.07);
  --whub-shadow-md: 0 16px 40px rgba(5, 59, 89, 0.14);
  --whub-shadow-lg: 0 22px 44px rgba(5, 59, 89, 0.10);
  --whub-shadow-card: 0 6px 24px rgba(5, 59, 89, 0.07);
  --whub-shadow-drawer: -18px 0 50px rgba(5, 59, 89, 0.28);

  /* Focus state */
  --whub-focus-ring: 2px solid var(--whub-blue);
  --whub-focus-offset: 2px;

  /* Breakpoints (reference values — components use these as container-query thresholds) */
  --whub-bp-desktop: 1440px;
  --whub-bp-laptop: 1024px;
  --whub-bp-tablet: 768px;
  --whub-bp-mobile: 390px;
  --whub-bp-mobile-sm: 360px;
}

/* Global foundation shared by every page (prevents the browser's default 8px body margin) */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; padding: 0; width: 100%; }
img, svg { max-width: 100%; }