/* ---------------------------------------------------------
   Design tokens — "Pilbara Signal"
   Approved reference: design-system artifact (2026-08-18)
--------------------------------------------------------- */

:root {
  /* ---- Brand colour ---- */
  --color-navy-900: #0A2C49;   /* deepest — footer, dark bands */
  --color-navy-800: #0E3A5F;   /* primary brand navy */
  --color-navy-600: #1B5686;   /* lighter navy — hover, headings on light */
  --color-blue-500: #2C6FA6;   /* "Comms Blue" — links, icons, secondary accent */
  --color-ochre-500: #C1552C;  /* "Pilbara Ochre" — primary CTA accent, used sparingly */
  --color-ochre-600: #A8461F;  /* ochre hover/active */

  /* ---- Neutrals (blue-biased, not flat grey) ---- */
  --color-ink-900: #101923;    /* body text */
  --color-neutral-600: #5B6572; /* secondary text */
  --color-neutral-300: #C7CDD3; /* borders */
  --color-neutral-200: #E3E7EB; /* dividers */
  --color-neutral-100: #F0F2F4; /* subtle fill */
  --color-bg: #F6F8FA;          /* page background */
  --color-surface: #FFFFFF;     /* card/surface background */
  --color-surface-2: #EEF1F4;   /* icon chips, alt fill */
  --color-white: #FFFFFF;       /* text/icons on dark backgrounds */

  /* ---- Feedback (forms) ---- */
  --color-error: #B3261E;
  --color-success: #1E7A46;

  /* ---- Accents ---- */
  --color-star: #FFB800;        /* rating stars */

  /* ---- Typography ---- */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);   /* 28–36px */
  --text-3xl: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);       /* 36–48px */
  --text-4xl: clamp(2.75rem, 2.15rem + 2.8vw, 4rem);      /* 44–64px */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Spacing scale ---- */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6rem;     /* 96px — section gap */
  --space-3xl: 8rem;     /* 128px — desktop section padding */

  /* ---- Containers ---- */
  --container-wide: 1280px;
  --container-default: 1140px;
  --container-narrow: 760px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(16, 25, 35, 0.07);
  --shadow-md: 0 6px 20px rgba(16, 25, 35, 0.09);
  --shadow-lg: 0 24px 48px rgba(16, 25, 35, 0.14);
  --shadow-xl: 0 32px 64px rgba(16, 25, 35, 0.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-mobile-nav: 200;
  --z-modal: 300;
}

/*
  Breakpoint reference (used directly as px in media queries —
  custom properties cannot be interpolated into @media conditions):

  small-mobile   < 480px
  mobile         480–767px
  tablet         768–1023px
  laptop         1024–1279px
  desktop        1280–1439px
  large-desktop  >= 1440px
*/