/* ==========================================================================
   Field Recruit design tokens: the single source of truth.
   Colours are sampled from reference/mood-board.jpeg.
   Token names match 01-track-dark, so components can move between systems.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces ---- */
  --color-bg:        #f8f8f8;  /* page background: paper white */
  --color-surface:   #ffffff;  /* raised panels */
  --color-surface-2: #e9edf6;  /* blue-tinted panels, hover */
  --color-ink-bg:    #355095;  /* inverse sections */

  /* ---- Colour: lines ---- */
  --color-border:        #d9deea;  /* hairlines */
  --color-border-strong: #355095;

  /* ---- Colour: text ---- */
  --color-text:         #355095;  /* the brand blue is the text colour */
  --color-text-muted:   #556594;  /* secondary copy */
  --color-on-ink:       #f8f8f8;  /* text on --color-ink-bg */
  --color-on-ink-muted: #c9d3ec;

  /* ---- Colour: accent (blue is the only colour in the system) ---- */
  --color-accent:       #355095;
  --color-accent-hover: #263c75;
  --color-on-accent:    #f8f8f8;

  /* ---- Colour: feedback ---- */
  --color-error: #b3261e;

  /* ---- Typography ---- */
  --font-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale: scales smoothly between mobile and desktop */
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-2xl:  clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --text-3xl:  clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --text-4xl:  clamp(3.5rem, 2.25rem + 5.5vw, 7rem);

  --weight-regular: 400;
  --weight-medium:  500;

  --leading-solid:  0.9;   /* stacked wordmark and menus */
  --leading-tight:  1;
  --leading-snug:   1.2;
  --leading-normal: 1.55;

  --tracking-tight: -0.04em;   /* large headings */
  --tracking-snug:  -0.025em;
  --tracking-body:  -0.005em;

  /* ---- Spacing (4px base) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 9rem;

  /* ---- Layout ---- */
  --container-max:    80rem;
  --container-narrow: 42rem;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);

  /* ---- Shape: square corners, the system is paper and print ---- */
  --radius: 0;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
}