/* ===========================================================
   B4 Redesign — Design tokens
   Consumed by child theme + Elementor widgets (CSS vars).
   =========================================================== */

:root {
  /* Brand palette */
  --b4-blue:       210 95% 48%;
  --b4-blue-deep:  216 85% 22%;
  --b4-blue-ink:   218 55% 14%;
  --b4-blue-tint:  210 100% 96%;
  --b4-blue-mist:  212 40% 90%;
  --b4-aqua:       186 82% 46%;
  --b4-lime:       82 70% 55%;
  --b4-amber:      38 95% 58%;

  /* Neutrals */
  --ink:       222 47% 8%;
  --ink-2:     222 30% 20%;
  --muted:     220 10% 45%;
  --line:      220 18% 90%;
  --line-soft: 220 20% 95%;
  --surface:   0 0% 100%;
  --surface-2: 220 20% 98%;
  --surface-3: 214 30% 96%;
  --bg:        0 0% 100%;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(12,30,60,.04), 0 1px 3px rgba(12,30,60,.06);
  --sh-2: 0 4px 12px -2px rgba(12,30,60,.08), 0 2px 6px -2px rgba(12,30,60,.06);
  --sh-3: 0 20px 40px -12px rgba(12,30,60,.18), 0 8px 20px -10px rgba(12,30,60,.10);
  --sh-blue: 0 18px 40px -16px hsl(var(--b4-blue) / .45);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Inter', serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1: 180ms; --dur-2: 320ms; --dur-3: 600ms;

  /* Layout */
  --page-max: 1280px;
  --page-pad: clamp(20px, 4vw, 56px);
}

/* Density tweak */
html[data-density="compact"] { --page-pad: clamp(16px, 3vw, 40px); }
html[data-density="compact"] .elementor-section { padding-block: clamp(40px, 6vw, 80px) !important; }
html[data-density="roomy"]   .elementor-section { padding-block: clamp(96px, 13vw, 160px) !important; }