/* concepts/baby-zen/app/css/tokens.css
   ---------------------------------------------------------------------------
   Design tokens for BabyCry.

   Every value here was sampled out of the fasit renders in planning/design/
   rather than eyeballed, so the numbers below are the ground truth the screens
   are built from. Where DESIGN-SPEC kap. 1.1 quotes a rounder value, the
   sampled one wins — the spec says "ca." and the images are the contract.

   Layout is authored for a 390 x 844 pt iPhone viewport. Sizes are in px,
   which equal points at the CSS scale the app runs at.
   --------------------------------------------------------------------------- */

:root {
  /* ── Background ────────────────────────────────────────────────────────── */
  --bg-space-0: #000217;          /* vignette edge, sampled (0,3,25) */
  --bg-space-1: #010521;          /* body of the sky, sampled (1,5,33) */
  --bg-space-2: #071041;          /* lift towards the horizon behind the hero */
  --aurora-teal: #00386e;         /* left aurora veil, sampled */
  --aurora-violet: #2d1162;       /* right aurora veil, sampled */

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --card: rgba(126, 140, 224, 0.07);
  --card-strong: rgba(126, 140, 224, 0.11);
  --stroke: rgba(176, 188, 255, 0.14);
  --stroke-soft: rgba(176, 188, 255, 0.09);
  --sheet-bg: #0d1330;            /* glass sheet body over the dimmed scene */
  --sheet-bg-top: #131a3b;        /* sheets are a touch lighter at the lip */
  --sheet-stroke: rgba(176, 188, 255, 0.16);
  --scrim: rgba(2, 4, 18, 0.55);

  /* ── Ink ───────────────────────────────────────────────────────────────── */
  --ink: #edeff9;
  --ink-dim: #a9afd9;
  --ink-faint: rgba(169, 175, 217, 0.62);
  --ink-serif: #cfd2e6;           /* silver gradient mid-stop for display type */

  /* ── Accents ───────────────────────────────────────────────────────────── */
  --cyan: #4fe0ec;
  --cyan-bright: #48dbfb;         /* check badge / slider fill, sampled */
  --violet: #8b5cf6;
  --violet-deep: #675dd9;         /* selected segment pill, sampled */
  --green: #10b981;               /* AirPods-connected dot */
  --warm-baby: #f4c9a4;

  --gradient-brand: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  --gradient-cta: linear-gradient(90deg, #2cd8fd 0%, #6f7cfb 52%, #a55dfb 100%);
  --gradient-ink: linear-gradient(180deg, #f4f5fb 0%, #cdd0e4 55%, #9ea3c4 100%);

  /* ── Glow ──────────────────────────────────────────────────────────────── */
  --glow-cyan: 0 0 24px rgba(79, 224, 236, 0.45);
  --glow-violet: 0 0 28px rgba(139, 92, 246, 0.45);
  --glow-ring: 0 0 32px rgba(79, 224, 236, 0.3), 0 0 58px rgba(139, 92, 246, 0.26);

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --r-tile: 16px;
  --r-card: 20px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  /* The display face in the fasit is a high-contrast old-style serif. Didot
     and Bodoni 72 ship with iOS and are the closest matches; the rest of the
     stack is the graceful walk down. 'Times New Roman' is last before the
     generic because Linux maps it to Liberation Serif, which keeps the
     screenshot comparison honest instead of falling into DejaVu Serif. */
  --font-serif: Didot, 'Bodoni 72', 'Iowan Old Style', 'Palatino Linotype', Palatino,
                Georgia, 'Times New Roman', serif;
  /* Same reasoning: Helvetica/Arial before the generic, because a Linux
     fallback to DejaVu Sans is ~12 % wider than SF Pro and every measurement
     against the fasit would inherit that error. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter,
               'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui: 380ms;
  --dur-sheet: 520ms;
  --dur-breath: 4s;
}

/* Screenshot and reduced-motion determinism.
   `?anim=0` (dev/fasit.mjs, Playwright) parks every ambient animation on its
   first frame so a render is byte-comparable between runs. */
html[data-anim='off'] *,
html[data-anim='off'] *::before,
html[data-anim='off'] *::after {
  animation-play-state: paused !important;
  animation-delay: -1ms !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-breath: 0s; }
}