/* Design tokens. Change colors, type, spacing and motion timing here only. */
:root {
  /* color: the accent ball is the identity (deep green; yellow and navy are previews below);
     blue = signal / correct, red = wrong / gap (the same roles these colors play in the paper's figures) */
  --page: #ffffff;
  --band: #eff7f2;
  --surface: #ffffff;
  --ink: #24292f;
  --ink-2: #5f6b7a;
  --line: #e4e7ec;
  /* the object's yellow: the ball in the example videos, the same in every palette */
  --yellow: #ffc533;
  /* the page's accent and its tints; --on-accent is text set on --accent */
  --accent: #2a7350;
  --accent-soft: #e0efe6;
  --accent-pastel: #cbe4d5;
  --on-accent: #fff;
  /* the venue badge's Opera House: sails and harbour */
  --sail: var(--accent);
  --wave: #9fd3ff;
  --wave-2: #d2ebff;
  --blue: #2b6ff3;
  --blue-soft: #e8f0ff;
  --red: #ef5350;
  --red-soft: #ffe9e8;
  --panel: #f3f6fb;
  --stage: #f9fafc;
  --green: #22a565;
  --bar-base: #d6dce6;

  /* results board: one hue per model group, validated for color-vision deficiency */
  --g-ours: #eda100;
  --g-closed: #2b6ff3;
  --g-open: #1baf7a;
  --g-motion: #4a3aa7;

  /* type */
  /* fallbacks name the platform fonts, so a missing web font still reads as a bold sans */
  --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --fs-title: clamp(2.875rem, 5.75vw, 5.05rem);
  --fs-subtitle: clamp(1.4375rem, 2.3vw, 2.07rem);
  --fs-authors: clamp(1.15rem, 1.5vw, 1.38rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --fs-small: clamp(0.9375rem, 1vw, 1rem);
  --fs-label: clamp(1rem, 1.2vw, 1.125rem);
  --fs-mono: 1rem;
  --fs-key: clamp(1.75rem, 2.6vw, 2.25rem);
  --fw-body: 400;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --section-gap: clamp(56px, 6vw, 84px);
  --container: 1280px;
  --container-wide: 1280px;
  /* the longest a paragraph line gets: about 75 characters of Figtree */
  --measure: 37em;
  --radius: 16px;
  /* the sticky section index: a row of tabs from 1280px, a bar naming the section below */
  --nav-h: 114px;
  --radius-sm: 10px;

  /* motion */
  --dur-loop: 5200ms;
  --dur-hop: 700ms;
  --dur-ui: 200ms;
}

/* PREVIEW: two alternative accents, switched by js/palette.js (remove both with it once the
   palette is chosen). The object's yellow, the chart colours and the videos stay as they are. */
:root[data-accent="navy"] {
  --band: #eef2f9;
  --accent: #213f6e;
  --accent-soft: #e2e9f4;
  --accent-pastel: #d0dcef;
  --on-accent: #fff;
  --sail: var(--accent);
  --wave: #8fb6ff;
  --wave-2: #c5d9ff;
}

:root[data-accent="yellow"] {
  --band: #fff9e6;
  --accent: #ffc533;
  --accent-soft: #fff1c2;
  --accent-pastel: #ffe59a;
  --on-accent: var(--ink);
  --sail: #fff;
  --wave: #2b6ff3;
  --wave-2: #7fb0ff;
}

@media (max-width: 1279px) {
  :root {
    --nav-h: 84px;
  }
}

/* phones: a tighter scale, so a screen holds more of the page */
@media (max-width: 599px) {
  :root {
    --fs-title: min(2.45rem, 10.4vw);
    --fs-subtitle: 1.22rem;
    --fs-authors: 1.08rem;
    --fs-h2: 1.625rem;
    --fs-h3: 1.1875rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-label: 0.9375rem;
    --fs-key: 1.625rem;
    /* Figtree at 400 reads thin on a phone screen */
    --fw-body: 500;
    --gutter: 16px;
    --section-gap: 44px;
  }
}