/* ============================================================
   BABY PISTACHIO — design tokens
   ------------------------------------------------------------
   Everything is sampled off the logo: the shell green of the
   baby itself (#586f50, the single most common pixel in the
   file), the off-white of the diaper, the terracotta of the
   tongue, and a husk tan for the nut it is named after.

   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 ---- */
  --cream: #f8f7ef;
  --cream-2: #eff1e4;
  --cream-3: #e3e9d3;
  --card: #fffef9;
  --line: #d1dbbd;
  --line-soft: #e5ebd6;

  /* ---- the green, straight off the baby ---- */
  --pist: #586f50;
  --pist-hi: #8faa7c;
  --pist-lit: #b6cd9d;
  --pist-deep: #46603c;
  /* Dark enough to be TEXT on cream, which is what it is used for — the
     clock, the paid strip, the tags. Not a tint. */
  --pist-ink: #2c3a26;

  /* ---- the nut ---- */
  --husk: #cbb890;
  --husk-deep: #9d885e;
  --accent: #c16749;

  /* ---- ink ---- */
  --ink: #232e1d;
  --ink-2: #4c5b44;
  --ink-3: #7d8b73;
  --ink-faint: #a9b49f;

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

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

  /* Soft and green-shadowed, never a hard offset — that is CATEWHEEL's
     signature, not this one. */
  --lift: 0 1px 2px rgba(45, 60, 38, 0.06), 0 6px 18px rgba(45, 60, 38, 0.08);
  --lift-lg: 0 2px 4px rgba(45, 60, 38, 0.06), 0 18px 44px rgba(45, 60, 38, 0.12);
  --glow: 0 0 0 1px rgba(88, 111, 80, 0.3), 0 10px 34px rgba(88, 111, 80, 0.24);

  --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(--pist-deep);
  outline-offset: 3px;
  border-radius: 6px;
}