/* JDBSPL design tokens — edit here, used everywhere */
:root {
  /* Brand */
  /* Pantone 18-4330 TCX Swedish Blue, monochromatic */
  --brand: #007DB3;
  --brand-deep: #01597D;
  --brand-dark: #02344B;
  --brand-light: #00A2E3;
  /* Neutrals */
  --charcoal: #001118;
  --slate: #4A4A4A;
  --gray: #6B6B6B;
  --gray-light: #D5E3EA;
  --off-white: #F2F7FA;
  --white: #FFFFFF;
  --brand-tint: #E3F4FB;
  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
  --grad-dark: linear-gradient(135deg, var(--brand-dark), var(--charcoal) 70%);

  /* Type (Inter) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2rem, 1.3rem + 3.2vw, 4rem);      /* 64 */
  --fs-h1: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);     /* 44 */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);      /* 36 */
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.75rem);      /* 28 */
  --fs-h4: 1.25rem;                                      /* 20 */
  --fs-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;

  /* Spacing (4/8 hybrid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px;
  --section-y: clamp(48px, 6vw, 96px);
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1200px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;

  /* Elevation & z-index */
  --shadow: 0 1px 2px rgba(26,26,26,.06), 0 4px 16px rgba(26,26,26,.06);
  --shadow-lg: 0 12px 40px rgba(26,26,26,.14);
  --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400;

  --header-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 1024px) { :root { --header-h: 80px; } }