/* ============================================================
   Complete Aesthete — Effects: radii, borders, shadows, motion
   ------------------------------------------------------------
   The CA aesthetic is SOFT and PAPER-LIKE. Shadows are barely
   there (gallery-print drop, never heavy UI elevation). Corners
   are gently rounded. Decorative "frames" use a hairline rule,
   not a heavy stroke.
   ============================================================ */

:root {
  /* Radii — soft, never pill-everything */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* Borders */
  --border-hair: 1px solid var(--border-soft);
  --border-accent-thin: 1px solid var(--border-accent);
  --border-frame: 1.5px solid var(--accent);   /* the printable "box" frame */

  /* Shadows — feather-light, warm, like paper on a table */
  --shadow-xs: 0 1px 2px rgba(32, 35, 42, 0.05);
  --shadow-sm: 0 2px 8px rgba(32, 35, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(32, 35, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(32, 35, 42, 0.10);
  /* Print-mockup shadow: a sheet of paper lifted off the surface */
  --shadow-paper: 0 18px 44px -18px rgba(32, 35, 42, 0.28),
                  0 4px 12px rgba(32, 35, 42, 0.06);
  /* Accent glow for focus rings */
  --ring: 0 0 0 3px var(--accent-wash), 0 0 0 4px var(--accent-soft);

  /* Motion — gentle, elegant. No bounce, no spring. */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast:  140ms;  /* @kind other */
  --dur-med:   240ms;  /* @kind other */
  --dur-slow:  420ms;  /* @kind other */
  --transition: all var(--dur-med) var(--ease-soft);  /* @kind other */

  /* Signature texture: subtle pearl shimmer, tileable, no watermark.
     Apply with: background-image: var(--pearl-texture); on a page. */
  --pearl-texture:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 0 6px, rgba(220,224,230,0.0) 7px),
    radial-gradient(circle at 22% 32%, rgba(190,196,206,0.35) 0 7px, rgba(0,0,0,0) 9px),
    radial-gradient(circle at 68% 64%, rgba(255,255,255,0.9) 0 5px, rgba(220,224,230,0.0) 6px),
    radial-gradient(circle at 70% 66%, rgba(190,196,206,0.30) 0 6px, rgba(0,0,0,0) 8px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.85) 0 4px, rgba(0,0,0,0) 5px),
    radial-gradient(circle at 46% 82%, rgba(190,196,206,0.25) 0 5px, rgba(0,0,0,0) 7px) /* @kind other */;
  --pearl-size: 130px 130px;
}