/* =============================================================
   SureTest Group — Design Tokens
   Single source of truth for all design values.
   Edit here; everything else inherits.
   ============================================================= */

:root {

  /* --- Colours --- */
  --color-brand-orange:   #FF4500;
  --color-brand-orange-dark: #CC3700;
  --color-brand-orange-light: rgba(255, 69, 0, 0.12);

  --color-navy:           #1A2B3C;
  --color-navy-mid:       #22364A;
  --color-steel:          #2C4A63;
  --color-steel-light:    #8FA8BE;

  --color-bg:             #F7F8FA;
  --color-surface:        #FFFFFF;
  --color-border:         #E4E6EA;
  --color-border-dark:    rgba(255,255,255,0.12);

  --color-text-primary:   #1A2B3C;
  --color-text-secondary: #6B7A8B;
  --color-text-muted:     #9AAABA;
  --color-text-inverse:   #FFFFFF;
  --color-text-inverse-muted: #8FA8BE;

  /* --- Typography --- */
  --font-display:  'Barlow Condensed', 'Barlow', sans-serif;
  --font-body:     'Source Sans 3', 'Source Sans Pro', sans-serif;

  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   1.875rem;   /*  30px */
  --text-3xl:   2.25rem;    /*  36px */
  --text-4xl:   2.75rem;    /*  44px */
  --text-5xl:   3.5rem;     /*  56px */
  --text-hero:  clamp(2.5rem, 6vw, 4.5rem);

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* --- 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 */
  --space-32:  8rem;      /* 128px */

  /* --- Layout --- */
  --container-max:   1140px;
  --container-wide:  1320px;
  --container-narrow: 760px;
  --section-gap:     var(--space-20);

  /* --- Borders & 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,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 2px 8px rgba(26,43,60,0.08);

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

  /* --- Nav --- */
  --nav-height:        68px;
  --nav-height-mobile: 60px;
}