/* tokens.css — design tokens
   Source: Figma → export → paste here
   These are the ONLY place colours, spacing, and type are defined.
   Every other CSS file uses these variables. */

:root {

  /* ── Colours ───────────────────────────────────────────────── */
  --color-primary:       #1B4FD8;
  --color-primary-dark:  #1641B0;
  --color-primary-light: #EEF2FF;

  --color-accent:        #F59E0B;
  --color-accent-light:  #FEF3C7;

  --color-success:       #16A34A;
  --color-error:         #DC2626;
  --color-warning:       #D97706;

  --color-black:         #0F172A;
  --color-gray-900:      #1E293B;
  --color-gray-700:      #374151;
  --color-gray-500:      #6B7280;
  --color-gray-300:      #D1D5DB;
  --color-gray-100:      #F3F4F6;
  --color-gray-50:       #F9FAFB;
  --color-white:         #FFFFFF;

  --color-bg:            #FFFFFF;
  --color-bg-secondary:  #F9FAFB;
  --color-border:        #E5E7EB;
  --color-text:          #1E293B;
  --color-text-muted:    #6B7280;

  /* Dark section used in why-trust-us / footer */
  --color-dark-bg:       #0F172A;
  --color-dark-text:     #F1F5F9;

  /* ── Typography ────────────────────────────────────────────── */
  --font-sans:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout ────────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  var(--space-6);

  /* ── Radius ────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-card: 0 2px 8px rgba(0,0,0,.06);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index ───────────────────────────────────────────────── */
  --z-header:  100;
  --z-modal:   200;
  --z-tooltip: 300;
}