/* ==========================================================================
   Design Tokens — all CSS custom properties derived from Figma frames
   ========================================================================== */

:root {
  /* --- Colours --- */
  --color-navy:          #142d5f;
  --color-navy-dark:     #0f172a;
  --color-orange:        #e8912d;
  --color-green:         #178745;
  --color-green-bg:      rgba(23, 135, 69, 0.10);
  --color-green-border:  rgba(23, 135, 69, 0.30);
  --color-badge-bg:      #f0f4ff;
  --color-badge-border:  #c7d6ff;
  --color-icon-bg:       #FFF4E6;
  --color-surface:       #f8fafc;
  --color-border:        #f1f5f9;
  --color-text-body:     #64748b;
  --color-text-heading:  #0f172a;
  --color-white:         #ffffff;
  --color-overlay:       rgba(15, 23, 42, 0.60);

  /* --- Typography --- */
  --font-family:  'Inter', sans-serif;

  /* Type scale — mobile base */
  --text-eyebrow: 0.6875rem;   /* 11px */
  --text-sm:      0.8125rem;   /* 13px */
  --text-base:    0.9375rem;   /* 15px */
  --text-lg:      1.0625rem;   /* 17px */
  --text-xl:      1.125rem;    /* 18px */
  --text-2xl:     1.25rem;     /* 20px */
  --text-3xl:     1.5rem;      /* 24px */
  --text-4xl:     2rem;        /* 32px */
  --text-5xl:     2.625rem;    /* 42px */

  /* --- Spacing --- */
  --space-xs:   0.5rem;    /* 8px  */
  --space-sm:   0.75rem;   /* 12px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.25rem;   /* 20px */
  --space-xl:   1.5rem;    /* 24px */
  --space-2xl:  2rem;      /* 32px */
  --space-3xl:  2.5rem;    /* 40px */
  --space-4xl:  3rem;      /* 48px */
  --space-5xl:  4rem;      /* 64px */
  --space-6xl:  6rem;      /* 96px */

  --page-x-mobile:  1.25rem;   /* 20px */
  --page-x-tablet:  3rem;      /* 48px */
  --page-x-desktop: 8rem;      /* 128px — content centred max 1440px */

  --section-y-mobile:  4rem;   /* 64px  */
  --section-y-tablet:  6rem;   /* 96px  */
  --section-y-desktop: 6rem;   /* 96px  */

  /* --- Radii --- */
  --radius-card:    1.5rem;     /* 24px */
  --radius-feature: 1.25rem;   /* 20px */
  --radius-img:     1rem;      /* 16px */
  --radius-btn:     0.75rem;   /* 12px */
  --radius-badge:   6.25rem;   /* 100px — pill */
  --radius-icon:    0.875rem;  /* 14px */
  --radius-social:  0.5rem;    /* 8px  */

  /* --- Shadows --- */
  --shadow-card:  0 24px 64px 0 rgba(20, 45, 95, 0.16);
  --shadow-btn:   0 8px 14px rgba(20, 45, 95, 0.28);

  /* --- Nav heights --- */
  --nav-height-mobile:  4rem;    /* 64px  */
  --nav-height-tablet:  5rem;    /* 80px  */
  --nav-height-desktop: 4.3125rem; /* 69px */

  /* --- Menu panel widths --- */
  --menu-width-mobile: 20rem;   /* 320px */
  --menu-width-tablet: 22.5rem; /* 360px */

  /* --- Transitions --- */
  --transition-menu: 0.3s ease;
}