/* Pixel training chrome. Cat pixels in the demos still come from the
   trained models and the held-out dataset; these tokens only colour
   the frames, type and panels around them. */

:root {
  --bg: #efe6d2;
  --bg-raised: #fffaf3;
  --bg-sunken: #e7dcc6;
  --line: #24170f;
  --text: #24170f;
  --text-soft: #5c4636;

  /* Dark stamps so paper-coloured labels stay readable on a fill. */
  --coral: #9d2f28;
  --sunflower: #94500f; /* 4.5:1 or better on all three paper shades */
  --mint: #1f5c3a;
  --sky: #1e3f66;
  --lilac: #6b3050;
  --stamp: #e07a3d;

  --accent: var(--coral);

  --font-head: "Noto Sans Display", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --fs-body: 24px;
  --fs-small: 20px;
  --fs-h1: 80px;
  --fs-h2: 58px;
  --fs-h3: 34px;
  --fs-label: 18px;

  --gap: 24px;
  --pad-x: 64px;
  --radius: 0px;
  --radius-small: 0px;
  --bar-h: 48px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 200ms;
  --t-med: 320ms;
}

@media (max-height: 900px) {
  :root {
    --fs-h1: 68px;
    --fs-h2: 48px;
    --fs-h3: 28px;
    --gap: 14px;
    --pad-x: 40px;
  }
}

/* Short laptops, and the same layout under 110–125% browser zoom. */
@media (max-height: 700px) {
  :root {
    --fs-body: 18px;
    --fs-small: 16px;
    --fs-h1: 44px;
    --fs-h2: 32px;
    --fs-h3: 22px;
    --fs-label: 14px;
    --gap: 8px;
    --pad-x: 24px;
    --bar-h: 36px;
  }
}

@media (max-width: 760px) {
  :root {
    --fs-body: 18px;
    --fs-small: 16px;
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 24px;
    --fs-label: 14px;
    --gap: 14px;
    --pad-x: 18px;
    --bar-h: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
  }
}