/* ==========================================================================
   BIS Design Tokens — Modern Professional Refresh
   Single source of truth. Every component consumes these; no hardcoded
   colors/sizes/spacing in component CSS.
   ========================================================================== */

:root {
  /* ---- Color: Primary (from BIS logo — navy) ---- */
  --color-navy-900: #021228;   /* darkest — body text, dark section backgrounds */
  --color-navy-800: #0a2540;
  --color-navy-700: #14385c;

  /* ---- Color: Secondary (from BIS logo — green wordmark accent) ---- */
  --color-green-600: #1f7a4d;
  --color-green-500: #2a9d63;
  --color-green-100: #e6f4ec;

  /* ---- Color: Accent (single CTA accent — teal, echoes the live site's
         existing diamond motif, used sparingly). Darkened from initial
         #0f9e93 (3.32:1 on white, failed WCAG AA) to meet 4.5:1 contrast
         for link text on white backgrounds — verified via axe. ---- */
  --color-accent-500: #0a746c;
  --color-accent-100: #e3f6f4;

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-surface: #f7f8fa;      /* card backgrounds on light sections */
  --color-surface-alt: #eef1f5;  /* secondary card / hover surface */
  --color-border: #dde2e8;
  --color-text: #182634;         /* body text on light backgrounds */
  --color-text-muted: #5b6773;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #b8c4cf;

  /* ---- Status (forms) ---- */
  --color-success: #1f7a4d;
  --color-error: #b3261e;
  --color-focus: #0f9e93;

  /* ---- Typography ---- */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  /* single family, weight does the differentiating work — avoids the
     live site's mixed Cinzel/Outfit inconsistency */

  --text-display: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);   /* hero H1 */
  --text-h1: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem);
  --text-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);       /* 30px desktop */
  --text-h3: 1.25rem;                                        /* 20px */
  --text-body: 1rem;                                         /* 16px */
  --text-support: 0.9375rem;                                 /* 15px */
  --text-caption: 0.8125rem;                                 /* 13px, eyebrows */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-wide: 0.06em;   /* eyebrow labels */

  /* ---- Spacing scale (used for margin/padding/gap everywhere) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;

  /* ---- Section / layout ---- */
  --container-max: 1200px;
  --gutter-mobile: 1.25rem;
  --gutter-desktop: 2rem;
  --section-space-mobile: var(--space-10);
  --section-space-desktop: var(--space-16);

  /* ---- UI foundations ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(2, 18, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(2, 18, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(2, 18, 40, 0.12);

  --border-width: 1px;
  --focus-ring: 0 0 0 3px rgba(15, 158, 147, 0.35);

  --motion-fast: 150ms ease;
  --motion-normal: 220ms ease;
  /* Motion principle: transitions on hover/focus state changes only
     (color, background, transform: translateY(-2px) max). No entrance
     animation, no scroll-triggered effects, no autoplay motion — the
     brief explicitly excludes "excessive animation" and "decorative
     complexity". Respect prefers-reduced-motion (see base.css). */
}