/* ===========================================================================
   Quill — Effects: radii, elevation, texture, motion
   ---------------------------------------------------------------------------
   The brand sits on PAPER, so elevation is soft and warm (ink-tinted, never
   black), corners are gently rounded, and a faint fractal-noise grain plus
   speck layer give every surface the tooth of a real sketchbook page.
   =========================================================================== */

:root {
  /* ---- Corner radii ---------------------------------------------------- */
  --radius-xs:  2px;
  --radius-sm:  4px;    /* buttons, inputs, badges */
  --radius:     8px;    /* cards, the default */
  --radius-lg:  16px;   /* large feature panels */
  --radius-pill: 999px; /* tier badges, avatars */

  /* ---- Elevation — warm, ink-tinted, layered --------------------------- */
  /* Shadows are built from sepia ink (42,38,34) at low alpha with negative
     spread, so they read as soft cast shadow on paper, never a hard drop. */
  --shadow-xs:  0 1px 2px rgba(42, 38, 34, 0.05);
  --shadow-sm:  0 1px 2px rgba(42, 38, 34, 0.05),
                0 4px 12px -6px rgba(42, 38, 34, 0.12);
  --shadow:     0 1px 2px rgba(42, 38, 34, 0.05),
                0 8px 24px -12px rgba(42, 38, 34, 0.20),
                0 24px 48px -24px rgba(42, 38, 34, 0.15);
  --shadow-lg:  0 2px 4px rgba(42, 38, 34, 0.05),
                0 20px 40px -16px rgba(42, 38, 34, 0.25),
                0 40px 80px -24px rgba(42, 38, 34, 0.15);
  --shadow-pop: 0 2px 4px rgba(42, 38, 34, 0.05),
                0 20px 40px -16px rgba(42, 38, 34, 0.30),
                0 40px 80px -24px rgba(42, 38, 34, 0.20); /* hover / lifted */

  /* Button hover lift — tokenized so it can flip in dark mode. */
  --shadow-btn-hover: 0 8px 20px -8px rgba(42, 38, 34, 0.30);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-soft:  cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast:   0.2s;   /* @kind other */
  --dur:        0.3s;   /* @kind other */
  --dur-slow:   0.5s;   /* @kind other */
  --lift:       translateY(-4px);   /* @kind other */
  --lift-sm:    translateY(-2px);   /* @kind other */

  /* ---- Texture --------------------------------------------------------- */
  /* Fractal-noise paper grain, encoded as an SVG data-URI. Apply with the
     .paper-grain utility (multiply blend) over any large surface.
     @kind other */
  --grain-noise: url("grain-noise.png");  /* rasterized from the original feTurbulence SVG data-URI (bundler-safe) @kind other */

  /* Light-tinted grain — for dark grounds, where the dark multiply grain
     would vanish. Used by .paper-grain under a screen blend in dark mode.
     @kind other */
  --grain-noise-light: url("grain-noise-light.png");  /* rasterized from the original feTurbulence SVG data-URI (bundler-safe) @kind other */
}

/* ---------------------------------------------------------------------------
   Texture utilities — fixed, pointer-events-none overlays for page grounds.
   Usage: place <div class="paper-grain"></div> + <div class="paper-specks"></div>
   as fixed siblings, or apply ::before / ::after on body (see preview site).
   --------------------------------------------------------------------------- */
.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  background-image: var(--grain-noise);
  mix-blend-mode: multiply;
}
.paper-specks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.15;
  background-image:
    radial-gradient(circle at 20% 30%, var(--ink-muted) 0.5px, transparent 1px),
    radial-gradient(circle at 80% 70%, var(--ink-muted) 0.5px, transparent 1px),
    radial-gradient(circle at 50% 50%, var(--ink-muted) 0.3px, transparent 1px);
  background-size: 180px 180px, 240px 240px, 120px 120px;
}