/* ============================================================
   BABY FONE — design tokens
   ------------------------------------------------------------
   A phone screen at night. Deep slate glass, the green of the
   answer-call button, and a warm amber picked off the monkey's
   fur. Deliberately the opposite of the family's warm-paper
   builds: dark, luminous, hard-edged numbers, app-icon corners
   instead of coins.
   ============================================================ */

:root {
  /* ---- the screen (kept under the old paper names so the page
     sheet needs no renaming) ---- */
  --ivory: #0e1219;
  --ivory-2: #101623;
  --ivory-3: #131a26;
  --card: #161d29;
  --line: #263042;
  --line-soft: #1f2836;

  /* ---- the call button (under the old gold names) ---- */
  --gold: #2fe27c;
  --gold-hi: #6ff0a6;
  --gold-lit: #52ea93;
  --gold-deep: #4fe08d;
  --gold-ink: #9df7c3;

  /* ---- the monkey ---- */
  --tabby: #d9a25a;
  --tabby-deep: #a9743a;
  --nose: #c0836b;

  /* ---- ink ---- */
  --ink: #edf2f7;
  --ink-2: #b4bfcd;
  --ink-3: #86929f;
  --ink-faint: #5a6572;

  /* ---- signal ---- */
  --good: #2fe27c;
  --warn: #e2b23a;
  --bad: #e2604a;

  /* ---- shape: app icons, not coins ---- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --lift: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.3);
  --lift-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.45);
  --glow: 0 0 0 1px rgba(47, 226, 124, 0.35), 0 10px 34px rgba(47, 226, 124, 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: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex 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;
  color-scheme: dark;
}

@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;
}