/* Fonts, type scale, spacing and layout. Colours are in themes/. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-italic.ac3e6cdbce96.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }

:root {
  /* type */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* golden-ratio scale (φ ≈ 1.618; half-steps √φ ≈ 1.272), a guide not a rule */
  --s-1: .5rem;       /*   8 */
  --s-2: .8125rem;    /*  13 */
  --s-3: 1.3125rem;   /*  21 */
  --s-4: 2.125rem;    /*  34 */
  --s-5: 3.4375rem;   /*  55 */
  --s-6: 5.5625rem;   /*  89 */
  --s-7: 9rem;        /* 144 */

  --t-xs: .75rem;     /* 12: tags, floor */
  --t-sm: .875rem;    /* 14 */
  --t-ui: 1rem;       /* 16: nav, buttons */
  --t-base: 1.125rem; /* 18: body */
  --t-lg: 1.4375rem;  /* 23 */
  --t-h3: 1.8125rem;  /* 29 */
  --t-h2: 2.9375rem;  /* 47 */
  --t-h1: 4.75rem;    /* 76 */

  /* layout */
  --wrap: 80rem;      /* one width site-wide */
  --read: 43rem;      /* ≈688px reading measure */
  --header-h: 4rem;
  --radius: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}