/* GOBO design tokens — replaces CMSMS [[$colour]] variables (CSS custom properties) */
:root {

  /* palette — from gobo_styles.25.css [[$var]] block */
  --color-black:      #000000;
  --color-white:      #ffffff;
  --color-blue:       #00D8AB;   /* primary accent */
  --color-dark-blue:  #08cda4;
  /* MAIN-AREA link green — the midpoint between the bright accent (#08cda4) and
     the dark #0a8069. Chosen because the two ends trade off against each other:
     too light and it fails to read on the grey backdrop, too dark and it stops
     being distinguishable from the #434343 body copy. This sits at 2.5:1 against
     the backdrop (readable) and 3.2:1 against body text (clearly a link).
     Deliberately its own token rather than reusing --color-dark-blue, because that
     one also drives the :focus-visible ring, and the ring lands on dark
     backgrounds too (black header, #888 footer) where a green this dark vanishes. */
  --color-link:       #09a686;
  --color-grey:       #cccccc;
  --color-light-grey: #eeeeee;
  --color-dark-grey:  #434343;
  --color-mid-grey:   #888888;
  --color-error:      #cc3300;

  /* surfaces — the page backdrop is the previous site's #eeeeee, taken a shade
     darker. It is what makes the white tile panels read as white boxes instead
     of blending into the page. --color-hairline is for rules drawn ON that
     backdrop: a line the same tone as the backdrop would be invisible against
     it, so hairlines sit a step darker (--color-light-grey stays for lines on
     light panels). */
  --color-page:       #eaeaea;
  --color-hairline:   #dcdcdc;

  /* type — display: Oswald (condensed grotesque) · body: Libre Franklin (humanist sans) */
  --font-regular:    'LibreFranklin', sans-serif;   /* 400 — body */
  --font-condensed:  'Oswald-SemiBold', sans-serif; /* 600 — headings/nav */
  --font-bold:       'Oswald-Bold', sans-serif;     /* 700 */
  --font-light:      'Oswald-Light', sans-serif;    /* 300 — display/hero */

  /* spacing — ONE rhythm so every gap on the site is related to every other */
  --space-2xs: .5rem;
  --space-xs:  .75rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  /* the three section steps: block gap · section padding · hero band */
  --space-lg:  clamp(2.5rem, 5vw, 4rem);
  --space-xl:  clamp(3.5rem, 7vw, 6rem);
  --space-2xl: clamp(5rem, 10vw, 8rem);

  /* gutter — the air between the content and the edge of the window */
  --space-gutter: clamp(1.25rem, 4vw, 3.25rem);

  /* reading measure — running copy stops short of the full container width */
  --measure:        68ch;
  --measure-narrow: 52ch;

  /* motion — one curve, three speeds, used everywhere (nothing snaps) */
  --ease:     cubic-bezier(.22, .61, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-quick: .35s;
  --dur-base:  .6s;
  --dur-slow:  .9s;

  /* layout */
  --max-width: 1280px;
}