/* Bubbly Surreal — Radii, borders, shadows, motion
   The three signatures: fat black outlines, hard offset shadows, big soft radii. */

:root {
  /* ---- Corner radii (everything is soft & bubbly) ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 44px;
  --radius-pill: 999px;   /* full pill — the default for buttons & chips */
  --radius-blob: 42% 58% 62% 38% / 48% 42% 58% 52%; /* organic blob */

  /* ---- Borders — the one true outline ---- */
  --border-hair: 1px solid var(--line-hair);
  --border-thin: 2px solid var(--ink);
  --border: 3px solid var(--ink);       /* the default bubbly outline */
  --border-fat: 4px solid var(--ink);   /* emphasis / large elements */
  --border-width: 3px;

  /* ---- Hard offset shadows (no blur — the toy/sticker look) ---- */
  /* Shadows always use a DARK color so they recede — even in the goth theme,
     where --ink flips to bone. --shadow-ink is re-declared dark under goth. */
  --shadow-ink: #141210;
  --shadow-hard-sm: 3px 3px 0 var(--shadow-ink);
  --shadow-hard: 5px 5px 0 var(--shadow-ink);
  --shadow-hard-lg: 8px 8px 0 var(--shadow-ink);
  --shadow-hard-xl: 12px 12px 0 var(--shadow-ink);
  /* colored hard shadows for playful accents */
  --shadow-pink: 5px 5px 0 var(--pink-deep);
  --shadow-lilac: 5px 5px 0 var(--lilac-deep);
  /* the one soft shadow, reserved for floating overlays */
  --shadow-float: 0 18px 40px -12px rgba(20,18,16,.35);

  /* ---- Motion — springy & bouncy, never linear ---- */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* @kind other */
  --ease-out: cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 340ms; /* @kind other */

  /* Press displacement — element slides into its shadow */
  --press-shift: 3px;

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--sky-deep);
}