/*
  Theme tokens, modelled on overflow.nitjsefni.eu: cream dotted-paper ground,
  heavy serif headings, ink borders with hard offset shadows, orange accent.
  Change colours and fonts here; nothing else in the site hard-codes them.
*/
/* Fonts are served from assets/fonts (Latin subset). Source Serif 4 is one
   variable file covering every weight and optical size. */
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(../assets/fonts/source-serif-4-latin.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-700-latin.woff2) format("woff2");
}

:root {
  /* Colour */
  --bg: #f3eee0;            /* page ground */
  --grid: rgba(29, 28, 24, .22);  /* dotted-paper dots on the ground */
  --surface: #fdf9ef;       /* cards */
  --text: #1d1c18;          /* ink: text, borders, shadows */
  --muted: #5c574c;         /* secondary text */
  --line: #1d1c18;          /* heavy rules and card borders */
  --shadow: #1d1c18;        /* hard offset shadow */
  --accent: #FF7420;        /* orange: primary button, active filter, logo badge */
  --accent-text: #1d1c18;   /* text on top of --accent */
  --focus: #1d1c18;         /* keyboard focus ring: ink, like the borders */
  --logo-filter: none;      /* client logos are black files */
  color-scheme: light;

  /* Type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-lede: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --step-hero: clamp(3rem, 1.8rem + 5.2vw, 6rem);

  /* Space and shape */
  --page: 72rem;
  --gutter: max(16px, clamp(1rem, 4vw, 2.5rem));
  --section: clamp(3rem, 5vw, 4.5rem);
  --grid-size: 2.5rem;
  --border: 3px;
  --offset: 8px;            /* shadow distance on cards and buttons */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17160f;
    --grid: rgba(243, 238, 224, .18);
    --surface: #22201a;
    --text: #f3eee0;
    --muted: #b5ae9d;
    --line: #f3eee0;
    --shadow: #f3eee0;        /* cream, so the hard offset still shows on dark */
    --accent: #FF7420;
    --accent-text: #17160f;
    --focus: #FF7420;
    --logo-filter: invert(1) brightness(.92);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17160f;
  --grid: rgba(243, 238, 224, .18);
  --surface: #22201a;
  --text: #f3eee0;
  --muted: #b5ae9d;
  --line: #f3eee0;
  --shadow: #f3eee0;        /* cream, so the hard offset still shows on dark */
  --accent: #FF7420;
  --accent-text: #17160f;
  --focus: #FF7420;
  --logo-filter: invert(1) brightness(.92);
  color-scheme: dark;
}