/* =====================================================================
   motion-kit tokens. Values measured on metalab.com (Suno case, 2026-10).
   Root font-size is 10px, so 1.6rem = 16px.
   Font switch: <html data-fonts="free"> (default) or data-fonts="licensed".
   "licensed" expects PP Eiko / Basis Grotesque Pro / ABC Diatype Mono to be
   loaded by you (e.g. @font-face in fonts/fonts.css, linked from index.html).
   ===================================================================== */

:root {
  /* ---- spacing ---- */
  --gutter: 16px;
  --gutter-xs: 8px;
  --vertical-gutter: 140px;
  --spacing-mobile: 140px;           /* section rhythm, "auto" */
  --spacing-desktop: 180px;
  --spacing: var(--spacing-mobile);
  --radius-sm: .8rem;
  --radius-md: 1.6rem;

  /* ---- colour (dark theme, Metalab neutrals with a violet tint) ---- */
  --bg: #000;
  --bg-subtle: #171717;              /* media placeholder before load / mask bg */
  --text-bold: #fff;
  --text-regular: #cac5ca;
  --text-subtle: #79767a;
  --border-subtle: #313033;
  --highlight: #584dff;              /* Metalab purple: cursor focus/drag ring only */
  --button-bg: hsla(0, 0%, 73%, .2);
  --nav-glass: hsla(0, 0%, 73%, .6);
  --footer-bg: #05040f;

  --button-height: 3.2rem;
  --button-height-md: 3.2rem;

  /* ---- fonts: free substitutes (default) ---- */
  --font-display: "Newsreader", "Times New Roman", serif;          /* for PP Eiko */
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* for Basis Grotesque Pro */
  --font-mono: "DM Mono", ui-monospace, monospace;                  /* for ABC Diatype Mono */
  --display-weight: 300;
  --display-opsz: "opsz" 72;
  --text-weight: 400;
  --text-light-weight: 350;
  /* Hanken runs narrower than Basis at 16px: tracking 0 reproduces Basis' line breaks */
  --small-tracking-desktop: 0em;
}
@media (min-width: 967px) {
  :root {
    --gutter: 24px;
    --vertical-gutter: 180px;
    --spacing: var(--spacing-desktop);
    --button-height: 2.4rem;
  }
}

/* ---- the originals, if you hold licences ---- */
:root[data-fonts="licensed"] {
  --font-display: "PP Eiko", "Newsreader", serif;
  --font-text: "Basis Grotesque Pro", "Hanken Grotesk", sans-serif;
  --font-mono: "ABC Diatype Mono", "DM Mono", monospace;
  --display-weight: 300;
  --display-opsz: normal;
  --small-tracking-desktop: -.01em;   /* the measured Metalab value */
}

/* ---- light theme (Metalab's light token set) ---- */
:root[data-theme="light"] {
  --bg: #fff;
  --bg-subtle: #edf1f5;
  --text-bold: #000;
  --text-regular: #313033;
  --text-subtle: #605d62;
  --border-subtle: #c7c7c7;
  --footer-bg: #05040f;
}