/* ============================================================
   BABY CATE — design tokens
   ------------------------------------------------------------
   Everything is sampled off the logo: the ivory the coin sits
   on, the two golds in its rim, the tabby browns in the fur,
   and the soft cream of the pacifier.

   The deliberate distance from the rest of the family: this is
   NOT a dark trading board and NOT a pixel-art game UI. It is
   warm paper — soft light, round corners, diffuse shadows,
   generous air. The numbers are the only hard-edged thing on
   the page.
   ============================================================ */

:root {
  /* ---- paper ---- */
  --ivory: #fdf7e7;
  --ivory-2: #faeed4;
  --ivory-3: #f4e2bd;
  --card: #fffdf7;
  --line: #e8d5ac;
  --line-soft: #f0e2c4;

  /* ---- gold, straight off the coin rim ---- */
  --gold: #d9a521;
  --gold-hi: #f0c95a;
  --gold-lit: #f2ca5e;
  --gold-deep: #a9770d;
  --gold-ink: #6b4a05;

  /* ---- the kitten ---- */
  --tabby: #a9743a;
  --tabby-deep: #6d4620;
  --nose: #c0836b;

  /* ---- ink ---- */
  --ink: #3d2a12;
  --ink-2: #6b5333;
  --ink-3: #97805c;
  --ink-faint: #b9a480;

  /* ---- signal ---- */
  --good: #3f8f5f;
  --warn: #b8791b;
  --bad: #b8452f;

  /* ---- shape ---- */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  /* Soft and warm, never a hard offset — that is CATEWHEEL's signature,
     not this one. */
  --lift: 0 1px 2px rgba(109, 70, 32, 0.06), 0 6px 18px rgba(109, 70, 32, 0.07);
  --lift-lg: 0 2px 4px rgba(109, 70, 32, 0.06), 0 18px 44px rgba(109, 70, 32, 0.11);
  --glow: 0 0 0 1px rgba(217, 165, 33, 0.25), 0 10px 34px rgba(217, 165, 33, 0.22);

  --shell: 1140px;
  --bar-inner: 58px;
  --edge: 1px;
  /* The border counts toward the sticky bar's height. Defined apart, every
     "below the bar" calculation is off by exactly the border width. */
  --bar: calc(var(--bar-inner) + var(--edge));

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The UA sheet's [hidden] rule loses on specificity to any display
   declaration, which is how a "hidden" copy button ends up visible and
   clickable. Learned on CATEWHEEL. */
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
}

/* width/height attributes are presentational hints, and aspect-ratio is
   ignored once BOTH dimensions resolve to a length. Without this, setting
   only a CSS width leaves the attribute height in force and the image
   renders at the wrong shape. */
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 6px;
}