/* ============================================================================
   DESIGN TOKENS — System Trading Contracting and Services

   Every value here is lifted from the company profile the client has already
   approved (company-profile/style.css). The website is that profile in a
   browser, so the two must never drift. If a token changes, it changes in both
   places or in neither.

   The red is #E31A15 because that is what was measured off the approved logo
   artwork, not a value anyone picked.
   ========================================================================= */

:root {
  /* ---- colour -------------------------------------------------------- */
  --red:        #E31A15;
  --red-dark:   #C21510;
  --red-light:  #FF7A6B;
  --ink:        #1B1E20;   /* headings, the mark's charcoal */
  --ink-2:      #212528;   /* dark plates */
  --ink-3:      #343A40;   /* the lighter end of a dark gradient */
  --body:       #4A4F55;   /* running text */
  --muted:      #656A6F;   /* labels, captions */
  --paper:      #FFFFFF;
  --bone:       #F7F7F8;   /* alternating band */
  --line:       rgba(33, 37, 40, .16);
  --line-red:   rgba(227, 26, 21, .45);

  /* ---- type ---------------------------------------------------------- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-ar:      'Cairo', 'Dubai', 'Segoe UI', sans-serif;

  /* fluid sizes: min at 390px, max at 1440px, no media query needed */
  --t-h1:    clamp(2.05rem, 1.30rem + 3.10vw, 4.10rem);
  --t-h2:    clamp(1.55rem, 1.18rem + 1.55vw, 2.55rem);
  --t-h3:    clamp(1.12rem, 1.00rem + 0.50vw, 1.42rem);
  --t-lead:  clamp(1.02rem, 0.95rem + 0.32vw, 1.22rem);
  --t-body:  clamp(0.95rem, 0.92rem + 0.14vw, 1.04rem);
  --t-small: 0.86rem;
  --t-label: 0.70rem;

  /* ---- space --------------------------------------------------------- */
  --gutter:  clamp(1.15rem, 0.60rem + 2.30vw, 2.60rem);
  --section: clamp(3.40rem, 2.20rem + 5.00vw, 6.40rem);
  --max:     1240px;

  /* ---- other --------------------------------------------------------- */
  --radius:  10px;
  --shadow:  0 2px 10px rgba(21, 24, 26, .06), 0 10px 34px rgba(21, 24, 26, .07);
  --header-h: 76px;
}

@media (max-width: 760px) {
  :root { --header-h: 62px; }
}

/* The client reads this on a phone in daylight. Nothing here opts into a dark
   theme — the brief is a white plate, black type and red, and a browser-forced
   dark version of that is not the brand. */