/* ob. resource design tokens. From the ob-search editorial grid, tuned for a dense
   product UI: white page, black type, flat orange / lilac / sage blocks, 1px rules,
   tight medium-weight headings, small uppercase mono labels. No radius, no shadows.
   To use a licensed face, add @font-face rules for files in /fonts and set --sans. */

:root {
  --black: #000000;
  --white: #ffffff;
  --orange: #fe7141;
  --lilac: #cdabfe;
  --sage: #d1ddd3;
  --paper: #f7f6f4;
  --muted: rgb(0 0 0 / 0.55);
  --faint: rgb(0 0 0 / 0.22);
  --rule: rgb(0 0 0 / 0.14);
  --hover: rgb(205 171 254 / 0.45);
  --scrim: rgb(0 0 0 / 0.4);
  --alert: #fe7141;
  --ok: #d1ddd3;

  /* Project colours: flat, all readable with black type. */
  --p0: #fe7141; --p1: #cdabfe; --p2: #9fd8c3; --p3: #f2df74;
  --p4: #a8c5ff; --p5: #f4b6c9; --p6: #d6c3a5; --p7: #c9e27a;

  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Geist Mono", Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;

  --text-display: clamp(48px, 7.4vw, 112px);
  --text-title: clamp(34px, 4vw, 56px);
  --text-heading: 26px;
  --text-big: 32px;
  --text-lead: clamp(19px, 1.7vw, 22px);
  --text-body: 16px;
  --text-ui: 15px;
  --text-small: 14px;
  --text-label: 11.5px;

  --track-display: -0.06em;
  --track-title: -0.045em;
  --track-heading: -0.03em;
  --track-ui: -0.01em;
  --track-label: 0.03em;

  --gutter: 24px;
  --header: 56px;
  --rail: 240px;
  --rule-width: 1px;
  --rule-strong: 2px;
  --fast: 0.15s;
  --slide: 0.25s;

  color-scheme: light;
}

@media (max-width: 860px) {
  :root {
    --gutter: 16px;
    --rail: 160px;
    --text-display: clamp(42px, 12.5vw, 72px);
    --text-big: 26px;
  }
}

* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--white); }
body {
  margin: 0; background: var(--white); color: var(--black);
  font: var(--weight-regular) var(--text-body) / 1.45 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: var(--rule-width); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--rule-strong) solid var(--black); outline-offset: 2px; }
[hidden] { display: none !important; }

.mono {
  font-family: var(--mono); font-size: var(--text-label); line-height: 1.4;
  text-transform: uppercase; letter-spacing: var(--track-label); font-weight: var(--weight-regular);
}
.display { font: var(--weight-medium) var(--text-display) / 0.95 var(--sans); letter-spacing: var(--track-display); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}