/* ============================================================
   EFFECTS — Paperdoodle
   Borders, shadows, paper texture. The signature look is a 2px ink
   stroke on wobbly corners, sitting on warm paper with a soft,
   slightly-offset shadow (like a sheet resting on a desk).
   ============================================================ */
:root {
  /* ---- Strokes ---- */
  --border-ink:   2px solid var(--stroke);
  --border-ink-thin: 1.5px solid var(--stroke);
  --border-soft:  1.5px solid var(--stroke-soft);
  --border-hair:  1px solid var(--hairline);
  --border-dashed:2px dashed var(--ink-400);

  /* ---- Shadows ---- */
  /* a single sheet resting on the desk */
  --shadow-paper: 2px 3px 0 rgba(34, 31, 26, 0.16);
  /* lifted / interactive */
  --shadow-lift:  3px 5px 0 rgba(34, 31, 26, 0.22);
  /* soft ambient under cards */
  --shadow-soft:  0 8px 22px -10px rgba(34, 31, 26, 0.30);
  /* stacked paper (multiple sheets), like the Wired demo panel */
  --shadow-stack:
    2px 2px 0 var(--paper-50),
    3px 3px 0 var(--stroke),
    6px 6px 0 var(--paper-50),
    7px 7px 0 var(--stroke);
  /* pressed-in / inset doodle */
  --shadow-inset: inset 2px 2px 0 rgba(34, 31, 26, 0.10);

  /* ---- Tiny rotations for a hand-placed feel ---- */
  --tilt-1: -0.8deg; /* @kind other */
  --tilt-2: 0.6deg;  /* @kind other */
  --tilt-3: -1.4deg; /* @kind other */

  /* ---- Paper grain texture (subtle, tileable, no asset) ---- */
  --paper-grain:
    radial-gradient(circle at 20% 30%, rgba(120,100,60,0.04) 0 1px, transparent 1px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(120,100,60,0.035) 0 1px, transparent 1px) 3px 4px / 9px 9px; /* @kind other */

  /* ---- Ruled / grid paper backgrounds ---- */
  --bg-ruled:
    linear-gradient(var(--surface-page) 0 0) padding-box,
    repeating-linear-gradient(var(--surface-page) 0 31px, var(--ink-100) 31px 32px);
  --bg-grid:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(140,130,112,0.18) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(140,130,112,0.18) 23px 24px);

  /* ---- Focus ring (doodle dashed) ---- */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--accent);
}