/* ─────────────────────────────────────────────────────────────────────────
 * spacing.css — size, spacing, radius, shadow & motion tokens
 *
 * 4px base size scale + an 8pt baseline spacing scale used across the
 * wireframes. Corners run SHARP by default on cards, inputs and tiers (radius
 * 0, editorial) — but BUTTONS are pill-rounded (--button-radius). Soft radii
 * (8–48px) are reserved for app icons and avatars. Shadows are restrained; the matte
 * surfaces don't float.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* size scale (4px base) */
  --size-0: 0;
  --size-px: 1px;
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 32px;
  --size-8: 40px;
  --size-9: 48px;
  --size-10: 64px;
  --size-11: 80px;
  --size-12: 96px;
  --size-13: 128px;

  /* spacing scale (8pt baseline — section rhythm) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* radius — sharp surfaces, pill buttons */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-app-icon: 48px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 4px 14px rgba(10, 10, 10, 0.1);
  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.14);
  --shadow-ink-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.1);
  /* the highlighted tier card's signature sienna lift */
  --shadow-sienna: 0 8px 24px rgba(186, 104, 73, 0.10);

  /* ── Motion ──────────────────────────────────────────────────────────
   * Calm and Apple-leaning. Soft easing for breathing/opacity; emphatic for
   * scale-in; linear ONLY for continuous rotation (recurring loop). Patterns
   * loop slow (2.4–6s); UI transitions are quick (150–420ms). Reduced-motion
   * pauses everything decorative — the clock keeps ticking (it's information).
   */
  --motion-duration-fast: 150ms;  /* @kind other */
  --motion-duration-base: 240ms;  /* @kind other */
  --motion-duration-slow: 420ms;  /* @kind other */

  --motion-easing-out: cubic-bezier(0.2, 0, 0, 1);        /* @kind other */
  --motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --motion-easing-stand: cubic-bezier(0.33, 1, 0.68, 1);  /* @kind other */

  /* easing presets used across patterns + wireframes */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */ /* soft: breathe, pulse, opacity */
  --ease-stand: cubic-bezier(0.33, 1, 0.68, 1); /* @kind other */ /* emphatic: scale/appear */
  --ease-linear: linear;                        /* @kind other */ /* rotation only (recurring) */

  /* ── Component tokens ───────────────────────────────────────────────── */
  --button-height-md: 44px;
  --button-height-lg: 48px;
  --button-padding-md: 12px 20px;
  --button-radius: var(--radius-pill);
  --button-weight: 600;

  --input-height: 48px;
  --input-radius: var(--radius-none);
}