/* site.css — the one set of tokens for the site and every toy.
   DEFAULT IS DARK (DARK-SPEC.md, the i2 Chapters look): near-black desk, white line-art, one signal-orange accent,
   DM Sans + JetBrains Mono. The previous paper palette lives on under [data-theme="paper"].
   Token names never change; --red* are kept as aliases of the accent because toys and pages use them.
   Fonts: pages load https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=JetBrains+Mono:wght@400;500&display=swap
   NEW tokens this round: --accent, --accent-ink, --sans. Never set --accent: var(--red) (it is now a cycle). */

:root {
  color-scheme: dark;

  /* ---------- palette: the desk at night ---------- */
  --bg: #0b0b0b;        /* the desk */
  --paper: #141414;     /* a raised surface on the desk (cards, chips, inputs) */
  --paper-2: #1c1c1c;   /* a second step up */
  --ink: #ececec;       /* text, 17.9:1 on --bg */
  --body: #a9a9a9;      /* running text, 8.6:1 */
  --muted: #6e6e6e;     /* labels only (3.9:1); never body text */
  --line: #262626;      /* hairlines */
  --accent: #ff5a00;    /* signal orange. the only accent. */
  --accent-ink: #0b0b0b;/* text on orange, 6.6:1 */
  --red: var(--accent); /* alias (was the pen) */
  --red-ink: var(--accent-ink);
  --hi: #ffb27a;        /* warm light (lamp pools, glows); never UI chrome */
  --shade: 0, 0, 0;     /* rgb of every shadow */

  /* ---------- type ---------- */
  --sans: 'DM Sans', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Newsreader', Georgia, serif;          /* content only (Margin's sample text); not page UI */
  --hand: 'Caveat', 'Bradley Hand', cursive;      /* handwriting inside toys only (Margin's red pen) */
  --t-label: 500 11.5px/1.2 var(--mono);           /* uppercase labels, letter-spacing .08em */
  --t-ui: 500 12px/1 var(--mono);                  /* buttons, chips */
  --t-say: 400 16px/1.45 var(--sans);              /* narration lines */

  /* ---------- shape ---------- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- depth ---------- */
  --shadow-1: 0 0 0 1px rgba(var(--shade), .07), 0 1px 1px rgba(var(--shade), .08), 0 4px 10px -6px rgba(var(--shade), .35);
  --shadow-2: 0 0 0 1px rgba(var(--shade), .06), 0 2px 4px rgba(var(--shade), .06), 0 16px 32px -20px rgba(var(--shade), .5);
  --shadow-3: 0 0 0 1px rgba(var(--shade), .05), 0 10px 18px -8px rgba(var(--shade), .28), 0 32px 56px -28px rgba(var(--shade), .55);

  /* ---------- motion: soft-body springs ----------
     Each spring exists twice: as a CSS easing (linear(), sampled from the simulation)
     with its natural duration, and as JS constants (mass 1, stiffness k, damping c)
     for scripted motion. Same numbers, same feel, in CSS and in WebGL. */

  /* press: squash under a finger, a held thing following the pointer. k=520 c=34, ~3% overshoot */
  --spring-press: linear(0, 0.0316, 0.1041, 0.2009, 0.3094, 0.42, 0.5264, 0.6243, 0.7112, 0.7859, 0.8485, 0.8993, 0.9395, 0.9702, 0.9928, 1.0087, 1.0192, 1.0253, 1.0283, 1.0287, 1.0275, 1.0252, 1.0223, 1.0191, 1.016, 1.0129, 1.0102, 1.0078, 1.0057, 1.004, 1.0026, 1.0015, 1.0007, 1.0001, 0.9997, 0.9994, 1);
  --spring-press-dur: 400ms;
  --spring-press-k: 520; --spring-press-c: 34; --spring-press-m: 1;

  /* settle: a drop, a landing, a lift. k=260 c=21, ~7% overshoot */
  --spring-settle: linear(0, 0.0442, 0.1507, 0.2899, 0.4395, 0.5839, 0.7132, 0.822, 0.9085, 0.9718, 1.0173, 1.0461, 1.0614, 1.0666, 1.0646, 1.0581, 1.0491, 1.0392, 1.0297, 1.0208, 1.0132, 1.0072, 1.0026, 0.9993, 0.9972, 0.996, 0.9956, 0.9956, 0.996, 0.9966, 0.9972, 0.9979, 0.9985, 0.999, 0.9995, 0.9998, 1);
  --spring-settle-dur: 700ms;
  --spring-settle-k: 260; --spring-settle-c: 21; --spring-settle-m: 1;

  /* soft: big travel (a sheet opening, a camera, a card dealt). k=140 c=17, ~4% overshoot */
  --spring-soft: linear(0, 0.0359, 0.1212, 0.2342, 0.3612, 0.485, 0.6007, 0.7055, 0.7929, 0.8645, 0.9221, 0.9648, 0.9955, 1.0164, 1.0296, 1.0362, 1.0384, 1.0374, 1.0343, 1.0301, 1.0252, 1.0204, 1.0159, 1.0118, 1.0084, 1.0056, 1.0033, 1.0016, 1.0003, 0.9995, 0.9989, 0.9986, 0.9985, 0.9986, 0.9987, 0.9988, 1);
  --spring-soft-dur: 850ms;
  --spring-soft-k: 140; --spring-soft-c: 17; --spring-soft-m: 1;

  /* jelly: squash-and-stretch counter-oscillation only (scaleX/scaleY). k=300 c=19, ~13% overshoot */
  --spring-jelly: linear(0, 0.0643, 0.2167, 0.409, 0.6049, 0.7801, 0.9211, 1.0231, 1.0863, 1.1189, 1.1263, 1.1163, 1.0961, 1.0715, 1.0469, 1.0257, 1.0083, 0.996, 0.9883, 0.9847, 0.9841, 0.9856, 0.9882, 0.9913, 0.9944, 0.9971, 0.9992, 1.0007, 1.0016, 1.002, 1.002, 1.0018, 1.0014, 1.001, 1.0007, 1.0003, 1);
  --spring-jelly-dur: 790ms;
  --spring-jelly-k: 300; --spring-jelly-c: 19; --spring-jelly-m: 1;

  /* sink: putting something away (a modal closing back into its card). k=160 c=22, <1% overshoot */
  --spring-sink: linear(0, 0.0222, 0.0752, 0.1496, 0.2322, 0.3211, 0.4066, 0.4905, 0.5661, 0.6367, 0.6977, 0.7527, 0.7989, 0.8394, 0.8726, 0.901, 0.9237, 0.9428, 0.9576, 0.9695, 0.979, 0.9862, 0.9918, 0.9958, 0.9988, 1.0008, 1.0022, 1.0031, 1.0035, 1.0037, 1.0037, 1.0035, 1.0033, 1.003, 1.0026, 1.0023, 1);
  --spring-sink-dur: 620ms;
  --spring-sink-k: 160; --spring-sink-c: 22; --spring-sink-m: 1;

  /* soft-body limits: how far anything deforms, never more */
  --squash: .965;          /* scaleY on press; scaleX = 2 - squash (volume kept) */
  --stretch-max: .14;      /* max stretch along a motion axis while travelling */
  --dur-fade: 220ms;       /* content in, after a shape lands */
  --dur-fade-out: 120ms;   /* content out, before a shape leaves */

  /* modal / sheet (added by task A, motion lab) */
  --r-modal: 22px;         /* modal and bottom-sheet corners */
  --scrim: rgba(0, 0, 0, .55);
  --scrim-blur: 7px;
  --shadow-modal: 0 0 0 1px rgba(var(--shade), .08), 0 40px 90px -30px rgba(var(--shade), .6), 0 12px 30px -18px rgba(var(--shade), .4);
  --goo-blur: 12;          /* feGaussianBlur stdDeviation for the goo filter */

  /* idle breathing on the first thing you can touch: one slow inhale, then rest */
  --breathe-dur: 3.2s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);   /* for fades only, never for movement */
}

/* Paper: the round-1 palette, kept whole. Opt in with data-theme="paper" on any element. */
[data-theme="paper"] {
  color-scheme: light;
  --bg: #f3eee6;
  --paper: #fbf8f2;
  --paper-2: #efe7da;
  --ink: #1d1b19;
  --body: #3b3632;
  --muted: #6c645d;
  --line: #dcd4c9;
  --accent: #d2323a;
  --accent-ink: #ffffff;
  --red: var(--accent);
  --red-ink: var(--accent-ink);
  --hi: #f6d77a;
  --shade: 60, 40, 20;
  --scrim: rgba(29, 27, 25, .38);
  --t-say: italic 400 17px/1.4 var(--serif);
}

/* Night: now the same as the default; kept so .night markup stays valid */
.night { color-scheme: dark; }

/* shared idle micro-motion: a gentle lift that says "this one moves" */
@keyframes site-breathe {
  0%, 62%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-2px) scale(1.018); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --spring-press: ease; --spring-settle: ease; --spring-soft: ease; --spring-jelly: ease;
    --spring-press-dur: 1ms; --spring-settle-dur: 1ms; --spring-soft-dur: 1ms; --spring-jelly-dur: 1ms;
    --spring-sink: ease; --spring-sink-dur: 1ms; --squash: 1; --stretch-max: 0;
  }
}