/* Design tokens.
 *
 * Surfaces, ink and radii are lifted from family.co: a warm off-white ground,
 * pure white cards, near-black text that is never actually black, and corner
 * radii that go much rounder than feels reasonable until you see it.
 *
 * The accent colours do double duty — they are the UI accents AND the pill
 * colours, which is what keeps the whole site reading as one object.
 */

:root {
  /* --- surfaces --- */
  --bg:           #F6F4EF;
  --bg-tint:      #F1EEE7;
  --surface:      #FFFFFF;
  --surface-alt:  #F2F0ED;
  --line:         rgba(28, 26, 24, 0.07);
  --line-strong:  rgba(28, 26, 24, 0.14);

  /* --- ink --- */
  --ink:       #343433;
  --ink-body:  #474645;
  --ink-mute:  #848281;
  --ink-faint: rgba(71, 70, 69, 0.55);

  /* --- accents, also used as pill colours --- */
  --blue:   #018CFF;
  --green:  #34C759;
  --orange: #FF5310;
  --amber:  #FFBE4C;
  --purple: #9553F9;
  --red:    #EF4444;
  --pink:   #F966AC;

  /* --- radii --- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   40px;
  --r-2xl:  72px;
  --r-pill: 999px;

  /* --- type --- */
  --font-display: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- elevation: warm, low-contrast, never grey-blue --- */
  --shadow-sm: 0 1px 2px rgba(28, 26, 24, .05), 0 0 0 1px rgba(28, 26, 24, .04);
  --shadow-md: 0 4px 18px rgba(28, 26, 24, .06), 0 0 0 1px rgba(28, 26, 24, .04);
  --shadow-lg: 0 20px 52px rgba(28, 26, 24, .10), 0 0 0 1px rgba(28, 26, 24, .04);

  /* --- motion --- */
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* --- layout --- */
  --page: 1180px;
  --nav-h: 66px;

  /* --- walk cycle (tunable in workbench.html) --- */
  --walk-duration: 1.00s;
  --leg-swing: 35deg;
  --arm-swing: 18deg;
  --bob-amount: 19px;
  --sway-amount: 0px;
  --arm-lag: 0.06s;
  --knee-bend-max: 89deg;
  --forward-lean: 0deg;

  /* On a light ground the character's drop shadow has to become soft and warm.
   * The assembler draws it as an offset copy of the silhouette, so translucency
   * here is what turns a hard stencil into an actual shadow. */
  --part-shadow-color: rgba(28, 26, 24, 0.085);
  --speckle-color: rgba(28, 26, 24, 0.30);
}