/* Design tokens of the Arsenal store page: fonts, colour, type scale, space, motion. The one :root block. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Arial scaled to the grotesk's width and vertical metrics, so the swap does not move the layout. */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104.7%;
  ascent-override: 93.3%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --font-sans: "Schibsted Grotesk", "Schibsted Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Stage: the gallery's cool blue-black (hue 255), three depths */
  --bg: oklch(.145 .011 255);
  --bg-deep: oklch(.12 .01 255);
  --surface: oklch(.185 .013 255);
  --surface-raised: oklch(.225 .015 255);
  --line: oklch(.29 .014 255);
  --line-strong: oklch(.4 .018 255);

  --text: oklch(.95 .006 255);
  --text-soft: oklch(.78 .012 255);
  --text-quiet: oklch(.68 .012 255);

  /* The one accent: warm stage light, as in the gallery; ink is the text colour on it */
  --light: oklch(.82 .13 78);
  --light-ink: oklch(.2 .02 80);
  --light-glow: oklch(.82 .13 78 / .12);
  --copper: oklch(.68 .14 50);

  --stage-spot: radial-gradient(120% 85% at 50% -12%, oklch(.82 .13 78 / .11), oklch(.82 .13 78 / .03) 48%, transparent 72%);

  /* Type scale: 17 px base, ratio 1.333 */
  --step-0: 1.0625rem;
  --step-1: 1.4167rem;
  --step-2: clamp(1.5rem, 1.2rem + 1vw, 1.889rem);
  --step-3: clamp(1.875rem, 1.4rem + 1.6vw, 2.518rem);
  --step-4: clamp(2.25rem, 1.5rem + 2.6vw, 3.357rem);
  --step-5: clamp(2.6rem, 1.6rem + 3.6vw, 4.475rem);
  --step-small: .9375rem;
  --step-label: .75rem;

  /* Space on an 8 px step */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --section-gap: clamp(6rem, 4rem + 8vw, 11rem);

  --page-max: 82.5rem;
  --gutter: 1.5rem;
  --margin: clamp(1rem, .5rem + 2vw, 1.5rem);
  --radius-tile: 8px;
  --radius-panel: 14px;
  --radius-pill: 999px;

  /* Motion: Material durations and easings, one system; no overshoot token on this page */
  --dur-fast: 150ms;
  --dur-moderate: 300ms;
  --dur-slow: 500ms;
  --dur-hero: 900ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-exit: cubic-bezier(.3, 0, .8, .15);
  --stagger: 70ms;
  --hero-delay: 240ms;
}