/* ==========================================================================
   IACBT — Design Tokens
   Central source of truth for color, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --color-primary: #1E40AF;        /* Rich royal blue */
  --color-primary-dark: #1E3A8A;
  --color-primary-light: #3B82F6;

  --color-secondary: #0F766E;      /* Deep teal */
  --color-secondary-dark: #115E59;

  --color-accent: #38BDF8;         /* Soft sky blue */

  --color-success: #16A34A;

  /* ---- Surfaces & Text ---- */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;

  --color-text-dark: #0F172A;
  --color-text-body: #475569;
  --color-text-muted: #64748B;

  --color-border: #E2E8F0;

  --color-footer: #0F172A;
  --color-footer-text: #CBD5E1;

  /* ---- Gradients ---- */
  --gradient-primary:
    linear-gradient(135deg, #1E40AF 0%, #0F766E 100%);

  --gradient-soft:
    linear-gradient(
      180deg,
      rgba(56, 189, 248, 0.12) 0%,
      rgba(56, 189, 248, 0) 100%
    );

  /* ---- Typography ---- */
  --font-heading: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* ---- Type scale (fluid via clamp) ---- */
  --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 3vw, 3rem);
  --nav-height: 84px;
  --nav-height-scrolled: 68px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ---- Shadow (soft, clinical — never harsh) ---- */
  --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-dropdown: 110;
  --z-overlay: 200;
  --z-modal: 210;
  --z-toast: 220;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}