/* ==========================================================================
   Peoplos — Shape, elevation & motion
   Generously rounded corners and soft, long, low-opacity shadows give
   surfaces a light, floating quality. Radius scales with the element.
   Shadows are large-radius, negative-spread, tinted toward ink or accent —
   never a flat gray drop. Motion is quick and soft.
   ========================================================================== */

:root {
  /* ---------- Radius scale ---------- */
  --pp-radius-ctrl:  10px;  /* buttons, small controls */
  --pp-radius-icon:  11px;  /* icon buttons, list glyphs, nav items */
  --pp-radius-chip:  14px;  /* segmented control track, chips */
  --pp-radius-input: 16px;  /* input fields */
  --pp-radius-card:  20px;  /* cards */
  --pp-radius-hero:  22px;  /* hero / feature surfaces */
  --pp-radius-pill:  999px; /* pills, tags, avatars */

  /* ---------- Elevation ---------- */
  /* Card: barely-there contact shadow + long soft lift. */
  --pp-shadow-card:  0 1px 2px rgba(31,34,48,.03), 0 14px 34px -26px rgba(31,34,48,.40);
  /* Hover: lift a little more. */
  --pp-shadow-hover: 0 2px 4px rgba(31,34,48,.05), 0 20px 40px -24px rgba(31,34,48,.46);
  /* Hero / brand surface: teal-tinted lift. */
  --pp-shadow-hero:  0 1px 2px rgba(31,34,48,.03), 0 20px 44px -26px rgba(14,143,131,.28);
  /* Modal / overlay: deepest. */
  --pp-shadow-modal: 0 1px 3px rgba(31,34,48,.06), 0 40px 80px -32px rgba(14,143,131,.36);
  /* Knob / toggle. */
  --pp-shadow-knob:  0 1px 2px rgba(31,34,48,.14);

  /* ---------- Motion ---------- */
  --pp-ease:        cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --pp-ease-lift:   cubic-bezier(.2, .8, .3, 1); /* @kind other */
  --pp-ease-pop:    cubic-bezier(.2, .85, .25, 1); /* @kind other */
  --pp-dur-state:   .15s; /* @kind other */
  --pp-dur-lift:    .18s; /* @kind other */
  --pp-dur-pop:     .28s; /* @kind other */

  --pp-t-state: all var(--pp-dur-state) var(--pp-ease); /* @kind other */
  --pp-t-lift:  all var(--pp-dur-lift) var(--pp-ease-lift); /* @kind other */
  --pp-t-pop:   all var(--pp-dur-pop) var(--pp-ease-pop); /* @kind other */
}

@keyframes pp-spin { to { transform: rotate(360deg); } }