/* Miqyas · مقياس: design tokens. Load fonts.html's link first. */
:root {
  /* colour: one ground, one ink, the water, and one line */
  --mq-gravel: #E4E1D8;      /* the ground, the dry side of every surface (about half) */
  --mq-paper: #F3F1EB;       /* the lighter step: paper, boards, the depth post */
  --mq-wet: #CEC9BC;         /* tone steps: far things, mountains, surfaces (a tenth) */
  --mq-ink: #1D221F;         /* ophiolite: type, and ground cut in section (a fifth) */
  --mq-silt: #7C5A35;        /* the water; only ever below the line (a fifth) */
  --mq-silt-deep: #5E4326;   /* water in shadow, speed streaks */
  --mq-silt-light: #9A7A52;  /* water catching light, speed streaks */
  --mq-foam: #DCCDB0;        /* churn and spray on moving water only */
  --mq-survey: #FF4D1A;      /* the line, and nothing else */
  /* no blue, anywhere: flash floods here run brown */

  /* type */
  --mq-font: Overpass, system-ui, sans-serif;
  --mq-font-ar: "Noto Kufi Arabic", system-ui, sans-serif;
  --mq-w-name: 900;          /* the name and display headlines */
  --mq-w-head: 800;
  --mq-w-text: 400;
  --mq-track-display: -0.03em;
  --mq-lead-display: .97;
  --mq-size-display: clamp(46px, 6.6vw, 104px);
  --mq-size-h2: clamp(34px, 4.4vw, 62px);
  --mq-size-h3: clamp(22px, 2vw, 28px);
  --mq-size-lead: clamp(18px, 1.5vw, 21px);
  --mq-size-text: 17px;
  --mq-size-small: 14.5px;
  --mq-figures: tabular-nums; /* levels are always: a sign, two decimals, metres — +1.20 m */

  /* the line: t is its thickness; everything in the mark is a multiple of t */
  --mq-t: 12px;                                  /* the line under a display headline */
  --mq-freeboard: calc(var(--mq-t) * 1.45);      /* gap from a baseline down to the top of the line */
  --mq-tri: calc(var(--mq-t) * 7);               /* ▽ side */
  --mq-rip-thick: calc(var(--mq-t) * .55);
  --mq-rip-gap: var(--mq-t);
  --mq-rip-1: calc(var(--mq-t) * 5);
  --mq-rip-2: calc(var(--mq-t) * 3.2);
  --mq-rip-3: calc(var(--mq-t) * 1.4);

  /* layout */
  --mq-margin: clamp(16px, 3.4vw, 48px);
  --mq-max: 1440px;
  --mq-section-gap: clamp(96px, 12vw, 200px);
}