/* Design tokens, version 2 ("Look A": desert sky, sand, coral, sun amber, panel blue).
   Colours are hex on purpose so a script can test contrast. Pairs checked for this file:
   ink on cream 13.3, ink on amber 8.0, ink on coral 5.2, ink on teal-3 6.8, cream on deep 12.7,
   cream on panel blue 6.5, cream on teal-dark 5.4. Cream on teal (3.8) is for large text only.
   scripts/check-static.mjs tests these pairs, and each --disc-<name>-ink on --disc-<name>, at 4.5. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-wght.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-wght.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }

:root {
  /* colour fields */
  --ink: #062C3B;
  --ink-soft: #0A4A5E;
  --deep: #0B2A5C;
  --panel: #0B56A8;
  --teal: #0E86A6;
  --teal-2: #17A8B4;
  --teal-3: #3CC4B8;
  --teal-dark: #0B6F78;
  --mint: #8FE8D4;
  --sun: #FFE36E;
  --cream: #FFF3D6;
  --cream-2: #FFE8B8;
  --amber: #FFB020;
  --sand: #F8C47E;
  --dune: #F6A45C;
  --dune-2: #EA7D43;
  --coral: #FF6A4A;
  --coral-deep: #A3331F;
  --coral-strong: #E5482B;
  --white: #FFFFFF;

  /* the six disciplines, taken from the nodes of film scene 5 (video/main.js DISC_FILL); each has an ink for text on it, contrast 4.5 or more */
  --disc-power: #ff5a45;
  --disc-power-ink: #0B1220;
  --disc-renewable: #ffcb2b;
  --disc-renewable-ink: #0B1220;
  --disc-electronics: #14b8a6;
  --disc-electronics-ink: #0B1220;
  --disc-control: #3d6df0;
  --disc-control-ink: #FFFFFF;
  --disc-comms: #19b5e6;
  --disc-comms-ink: #0B1220;
  --disc-computing: #d94fa0;
  --disc-computing-ink: #0B1220;

  /* type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --fs-hero: clamp(52px, 15vw, 224px);
  --fs-h2: clamp(40px, 6.2vw, 92px);
  --fs-h3: clamp(26px, 2.6vw, 34px);
  --fs-big: clamp(56px, 9vw, 144px);
  --fs-lead: clamp(20px, 2vw, 26px);
  --fs-body: 19px;
  --fs-small: 16px;

  /* spacing, an 8 px rhythm */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 144px;

  /* shape and motion */
  --r-sm: 14px;
  --r: 28px;
  --r-lg: 44px;
  --spring: cubic-bezier(0.3, 1.3, 0.5, 1); /* the packet asks for spring easing on taps and hovers; small overshoot only */
  --glide: cubic-bezier(0.2, 1, 0.3, 1);
  --pop: 0 6px 0 var(--ink);

  /* layout */
  --w-page: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;
}