/* Hallmark · tokens · SlowAI resource gallery · studied-DNA (user reference) — the full stamp is at the top of gallery.css */
:root {
  color-scheme: light;

  /* Colour — white paper, near-black ink, no chromatic accent: the page is monochrome like the reference.
     Every neutral carries a trace of green (hue 150) so nothing is a flat grey. */
  --color-paper:      oklch(99% 0.005 150);
  --color-paper-2:    oklch(95.5% 0.006 150);
  --color-rule:       oklch(86% 0.006 150);
  --color-rule-2:     oklch(90% 0.006 150);
  --color-neutral:    oklch(58% 0.006 150);
  --color-muted:      oklch(48% 0.006 150);
  --color-ink-2:      oklch(32% 0.008 150);
  --color-ink:        oklch(18% 0.010 150);
  --color-accent:     var(--color-ink);
  --color-accent-ink: var(--color-paper);
  --color-focus:      var(--color-ink);

  /* Imagery — thumbnails render in black and white so mixed sources read as one set.
     Set to `none` for colour. */
  --img-filter: grayscale(1);

  /* Type — one family by request: Graphik. Hanken Grotesk stands in until the Graphik files are added (fonts/README.md). */
  --font-display: "Graphik", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Graphik", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.953rem;
  --text-display: clamp(3rem, 9vw, 7rem);

  /* Space — 4 pt scale */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Rules */
  --rule-hair: 1px;
}

/* Graphik (Commercial Type) — wins automatically when installed on the machine, or when its .woff2 files
   sit in fonts/. If neither is true the browser falls through to Hanken Grotesk; nothing else changes. */
@font-face {
  font-family: "Graphik"; font-weight: 300; font-style: normal; font-display: swap;
  src: local("Graphik Light"), local("Graphik-Light"), url("fonts/Graphik-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Graphik"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Graphik Regular"), local("Graphik-Regular"), url("fonts/Graphik-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Graphik"; font-weight: 700; font-style: normal; font-display: swap;
  src: local("Graphik Bold"), local("Graphik-Bold"), url("fonts/Graphik-Bold.woff2") format("woff2");
}