:root {
  --kaindl-color-primary: #00305b;
  --kaindl-color-primary-hover: #00457f;
  --kaindl-color-accent: #6e89a8;
  --kaindl-color-text: #111111;
  --kaindl-color-surface: #ffffff;
  --kaindl-focus-ring: #0b4a81;

  /* Responsive typography tokens (global). */
  --kaindl-type-title-xl: clamp(1.875rem, 3.8vw, 3.5rem);
  --kaindl-type-title-lg: clamp(1.75rem, 3vw, 2.5rem);
  --kaindl-type-title-md: clamp(1.5rem, 2.35vw, 2rem);
  --kaindl-type-subtitle: clamp(1.125rem, 1.85vw, 1.625rem);
  --kaindl-type-card-title: clamp(1.375rem, 2.1vw, 1.7rem);
  --kaindl-type-card-text: clamp(0.9375rem, 1.05vw, 1.0625rem);
  --kaindl-type-body: clamp(1rem, 1vw, 1.125rem);
  --kaindl-type-hero-mobile: clamp(2rem, 10vw, 2.75rem);

  --kaindl-leading-tight: 1.1;
  --kaindl-leading-title: 1.16;
  --kaindl-leading-subtitle: 1.4;
  --kaindl-leading-copy: 1.65;
  --kaindl-leading-hero-mobile: 0.95;

  /* Layout tokens. */
  --kaindl-container-max: 1400px;
  --kaindl-container-max-wide: 1575px;
  --kaindl-container-max-narrow: 960px;
  --kaindl-gutter: 16px;
  --kaindl-section-space: clamp(40px, 6vw, 80px);
  --kaindl-font-family:
    "Helvetica Neue LT", "Helvetica Neue", Arial, sans-serif;

  /*
   * Responsive breakpoints (ascending mobile-first).
   * CSS media queries cannot use custom properties, so these are documented
   * here as the single source of truth. All CSS files MUST use only these values.
   *
   * Base       : mobile-first (no query)
   * bp-sm      : 640px   — small tablet and up
   * bp-md      : 1025px  — desktop (matches JS DESKTOP_HEADER_MEDIA_QUERY)
   * bp-lg      : 1280px  — wide desktop
   * bp-xl      : 1536px  — full-width desktop
   *
   * Usage:
   *   @media (min-width: 640px)  { ... }
   *   @media (min-width: 1025px) { ... }
   *   @media (min-width: 1280px) { ... }
   *   @media (min-width: 1536px) { ... }
   *
   * NEVER use max-width for layout breakpoints.
   * NEVER use compound queries like (min-width: X) and (max-width: Y).
   */
}