/* boopcat — radii, shadows & motion tokens
 * Soft volume, never harsh. Rounded everything: minimum radius 1rem; pills for
 * actions. Ambient blue-tinted shadows lift interactive cards off the cream. */

:root {
  /* ---- Corner radii (min 1rem / never sharp 90°) ---- */
  --radius-sm: 12px;
  --radius: 16px;        /* DEFAULT — cards */
  --radius-lg: 24px;     /* large feature cards */
  --radius-xl: 32px;     /* hero blocks */
  --radius-pill: 9999px; /* buttons, tabs, chips */

  /* ---- Elevation: soft ambient, blue-tinted ---- */
  --shadow-xs: 0 1px 2px rgba(45,55,72,0.06);
  --shadow-sm: 0 2px 8px rgba(71,145,242,0.10);
  --shadow-soft: 0 8px 24px rgba(71,145,242,0.15);   /* primary interactive cards */
  --shadow-floating: 0 12px 32px rgba(45,55,72,0.20);/* elements "above" the ui */
  --shadow-inner: inset 0 2px 6px rgba(45,55,72,0.08);/* recessed trays / inputs */

  /* ---- Comic "pop" — bold outline + hard offset shadow, borrowed from Boop's
   * speech bubble. The app's buttons, boxes & icons wear this "clean blue comic"
   * look: a crisp ink outline + a solid, blur-free colour shadow offset down-right.
   * Press travels INTO the shadow (translate by the offset, drop the shadow). ---- */
  --comic-line: var(--ink);                  /* the bold comic outline colour */
  --comic-outline: 2.5px solid var(--ink);   /* buttons, icon buttons, icon wells */
  --comic-outline-lg: 3px solid var(--ink);  /* cards & larger surfaces */
  --comic-outline-sm: 2px solid var(--ink);  /* badges & small chips */
  --pop-offset: 4px;                         /* press travel = the shadow offset */
  --pop-blue:      4px 4px 0 var(--boop-blue);        /* white surfaces — the signature */
  --pop-blue-deep: 4px 4px 0 var(--boop-blue-press);  /* on a blue fill (primary) */
  --pop-ink:       4px 4px 0 var(--ink);              /* neutral / max-contrast */
  --pop-magenta:   4px 4px 0 var(--magenta-press);    /* on a magenta fill (accent) */
  --pop-blue-lg:   6px 6px 0 var(--boop-blue);        /* large feature cards */
  --pop-blue-sm:   3px 3px 0 var(--boop-blue);        /* badges, icon wells */

  /* corner glow texture: 5% primary radial in card corners */
  --glow-corner: radial-gradient(120px 120px at 100% 0%, rgba(5,114,209,0.05), transparent 70%);

  /* ---- Borders ---- */
  --border-width: 1px; /* @kind spacing */
  --border-accent: 2px; /* @kind spacing */
  --ghost-dash: 1px dashed rgba(0,0,0,0.10); /* @kind other */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur: 0.3s; /* @kind other */
  --press-scale: 0.95; /* @kind other */
}

@keyframes boop-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Boop idle — the assistant sticker's gentle living bob */
@keyframes boop-idle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-6px) rotate(-1.5deg) scale(1.015); }
}

/* Comic status bubble pop-in (use with --ease-bounce) */
@keyframes boop-bubble-pop {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  60% { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}