/*
 * Design tokens, lifted from the original Oxygen build.
 *
 * Values are deliberately reproduced as-is (fixed px, not fluid clamp()) so
 * the rebuild can be verified against the original by direct comparison.
 * Moving to a fluid scale is a logged improvement for after parity is signed
 * off — not a change to make during the rebuild.
 */

:root {
  /* Brand palette — Oxygen global colours 1–5 */
  --mw-blue:      #71aedf;
  --mw-dark-blue:      #383846;
  --mw-mid-blue:       #395770;
  --mw-white:     #ffffff;
  --mw-very-dark:  #2a2a35;

  /* Greys, from the composite-elements set */
  --mw-grey-0:    #f9f9fa;
  --mw-grey-1:    #eceeef;
  --mw-grey-5:    #adb4b9;
  --mw-grey-6:    #98a1a8;
  --mw-grey-9:    #374047;

  /* Tints used across panels and CTAs */
  --mw-blue-10:   rgba(113, 174, 223, 0.10);
  --mw-blue-15:   rgba(113, 174, 223, 0.15);
  --mw-blue-20:   rgba(113, 174, 223, 0.20);

  /*
   * Type scale — seven steps, and nothing between them.
   *
   * The audit found twelve sizes rendering against six declared: 68, 54, 28,
   * 25 and 20 had all leaked in. Seven steps with real distance between each
   * is what lets hierarchy read; 18 next to 20 reads as a mistake, not a level.
   */
  --font-body:    'Metters', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /*
   * Fluid between a 480px and a 1600px viewport, so the page holds its
   * proportions on a large monitor instead of sitting as a small island in a
   * big field. Each step is clamp(min, intercept + slope, max) on the same
   * two anchors, which keeps the intervals between steps constant as they
   * scale. Labels do not scale — a 12px tracked label is a fixed signal.
   */
  --fs-label:     12px;
  --fs-small:     clamp(14px, 13.57px + 0.089vw, 15px);
  --fs-body:      clamp(16px, 15.14px + 0.179vw, 18px);
  --fs-h3:        clamp(20px, 18.29px + 0.357vw, 24px);
  --fs-h2:        clamp(24px, 21.43px + 0.536vw, 30px);
  --fs-h1:        clamp(30px, 27.43px + 0.536vw, 36px);
  --fs-display:   clamp(36px, 28.29px + 1.607vw, 54px);

  --lh-body:      1.4;
  --lh-heading:   1.2;
  --fw-light:     300;
  --fw-normal:    400;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Uppercase labels are the one place tracking is not optional. */
  --ls-label:     0.16em;

  /*
   * The grid.
   *
   * Twelve columns and one gutter. The tracks are fractions, so the gutter is
   * the only number set here and the column width follows from it — at the
   * 1240px measure a 24px gutter gives 81px tracks.
   *
   * It opened from 20px because the page read tight. The arithmetic that
   * found the grid in the first place still holds: items take spans, never
   * their own column count, so a three-up grid and a four-up grid on the same
   * page share gridlines whatever the gutter is.
   */
  --container:      1280px;
  --section-pad-x:  20px;
  --grid-cols:      12;
  --gutter:         24px;   /* constant — the module scales, the gutter does not */

  /*
   * Vertical rhythm. 18px body at 1.4 line-height is 25px, which is where the
   * unit started and why everything is a multiple of it. It runs to 30 at the
   * top of the range now — the derivation set the proportion, the eye set the
   * amount, and the page wanted more air than the line height alone gave it.
   */
  --unit:           clamp(20px, 15.71px + 0.893vw, 30px);
  --space-1:        var(--unit);
  --space-2:        calc(var(--unit) * 2);
  --space-3:        calc(var(--unit) * 3);
  --space-4:        calc(var(--unit) * 4);
  --section-pad-y:  var(--space-3);

  /*
   * Component gaps, for spacing inside a component — an icon beside its
   * label, a caption under a credit. These are not gutters and must not be
   * confused with them; a gutter separates grid tracks and is always 20px.
   */
  --gap-xs:         5px;
  --gap-s:          10px;
  --gap-m:          15px;

  /*
   * One ratio for every card image, so crops can't disagree across grids.
   * The original's project photo was 380px tall in a 600px column (≈16:10);
   * change this single value to reshape every card at once.
   */
  --card-ratio:     16 / 10;
  --card-zoom:      1.06;

  --radius-button:  3px;
  --radius-panel:   20px;

  /*
   * Motion.
   *
   * Three durations and the house curves, and nothing outside them. Movement
   * here is feedback: it says a control responded, or that something new has
   * arrived. Enter and exit decelerate, things moving on screen ease both ends,
   * hover and colour take the plain curve. Never ease-in on UI.
   */
  --dur-fast:  150ms;   /* hover, colour, a control acknowledging a pointer */
  --dur:       250ms;   /* panels opening, toggles turning */
  --dur-slow:  450ms;   /* something arriving: a reveal, an image settling */

  --ease:        ease;                              /* hover and colour */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* entering and exiting */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* moving on screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* the off-canvas */

  /* The distance a thing rises as it arrives, and an arrow's nudge on hover. */
  --rise:      12px;
  --nudge:     3px;
}

/*
 * Original breakpoints: 1280 / 991 / 767 / 479. Kept identical so responsive
 * behaviour can be compared at the same widths.
 */