/* ── Shadow & border system ──────────────────────────────────────────────
   Large blur, low opacity, warm ink. Objects sit slightly above paper —
   they never punch a hole in it. Elevation shadows pair with an inner
   highlight on light surfaces to read as a physical edge. */
:root{
  --shadow-xs:
    0 1px 1px rgb(var(--shadow-ink) / .04),
    0 1px 3px -1px rgb(var(--shadow-ink) / .05);
  --shadow-sm:
    0 1px 2px rgb(var(--shadow-ink) / .04),
    0 4px 10px -3px rgb(var(--shadow-ink) / .07);
  --shadow-md:
    0 1px 2px rgb(var(--shadow-ink) / .04),
    0 8px 20px -6px rgb(var(--shadow-ink) / .09),
    0 20px 40px -20px rgb(var(--shadow-ink) / .07);
  --shadow-float:
    0 2px 4px rgb(var(--shadow-ink) / .04),
    0 14px 28px -8px rgb(var(--shadow-ink) / .10),
    0 40px 72px -28px rgb(var(--shadow-ink) / .16);
  --shadow-photo:
    0 1px 2px rgb(var(--shadow-ink) / .10),
    0 10px 22px -8px rgb(var(--shadow-ink) / .18);
  --shadow-press:inset 0 1px 2px rgb(var(--shadow-ink) / .12);
  --shadow-inset-hairline:inset 0 0 0 1px rgb(var(--shadow-ink) / .05);
  --highlight-top:inset 0 1px 0 rgb(var(--highlight-ink) / .75); /* @kind shadow */
  --highlight-soft:inset 0 1px 0 rgb(var(--highlight-ink) / .45); /* @kind shadow */

  /* ── Drop-shadow elevations ──────────────────────────────────────────
     `filter: drop-shadow()` cannot consume the multi-layer --shadow-*
     tokens, so compound silhouettes (a folder tab + body, any clipped or
     multi-part shape) get their own single-layer equivalents. Same intent
     and roughly the same weight as --shadow-xs / -sm / -md: use these only
     where box-shadow genuinely cannot reach. */
  --drop-xs:0 1px 1px rgb(var(--shadow-ink) / .10); /* @kind shadow */
  --drop-sm:0 2px 6px rgb(var(--shadow-ink) / .11); /* @kind shadow */
  --drop-md:0 6px 13px rgb(var(--shadow-ink) / .15); /* @kind shadow */

  /* ── Control depth ───────────────────────────────────────────────────
     Buttons are the one place the system pushes skeuomorphism further than
     a card: a raised control needs a top sheen, a lit top edge, a shaded
     bottom edge, a tight contact shadow and a wide ambient one. The stack
     deepens with size, because a 50px CTA sits visibly higher off the page
     than a 32px control does. */
  --btn-sheen:linear-gradient(180deg,rgb(255 255 255 / .17) 0%,rgb(255 255 255 / .05) 46%,rgb(0 0 0 / .06) 100%); /* @kind other */
  --btn-sheen-paper:linear-gradient(180deg,rgb(var(--highlight-ink) / .95) 0%,rgb(var(--highlight-ink) / .35) 52%,rgb(var(--shadow-ink) / .035) 100%); /* @kind other */

  /* dark-ink controls (primary) */
  --btn-depth-sm:
    inset 0 1px 0 rgb(255 255 255 / .16),
    inset 0 -1px 0 rgb(0 0 0 / .16),
    0 1px 1px rgb(var(--shadow-ink) / .12),
    0 2px 5px -1px rgb(var(--shadow-ink) / .14); /* @kind shadow */
  --btn-depth-md:
    inset 0 1px 0 rgb(255 255 255 / .18),
    inset 0 -1px 0 rgb(0 0 0 / .18),
    0 1px 1px rgb(var(--shadow-ink) / .14),
    0 3px 6px -1px rgb(var(--shadow-ink) / .16),
    0 8px 18px -8px rgb(var(--shadow-ink) / .22); /* @kind shadow */
  --btn-depth-lg:
    inset 0 1px 0 rgb(255 255 255 / .20),
    inset 0 -1px 0 rgb(0 0 0 / .20),
    0 1px 1px rgb(var(--shadow-ink) / .16),
    0 4px 8px -1px rgb(var(--shadow-ink) / .18),
    0 12px 26px -10px rgb(var(--shadow-ink) / .26); /* @kind shadow */
  --btn-depth-lg-hover:
    inset 0 1px 0 rgb(255 255 255 / .22),
    inset 0 -1px 0 rgb(0 0 0 / .18),
    0 1px 1px rgb(var(--shadow-ink) / .14),
    0 6px 12px -2px rgb(var(--shadow-ink) / .18),
    0 20px 40px -14px rgb(var(--shadow-ink) / .30); /* @kind shadow */

  /* paper controls (secondary, tinted) */
  --btn-depth-paper-sm:
    var(--highlight-top),
    inset 0 -1px 0 rgb(var(--shadow-ink) / .07),
    0 1px 1px rgb(var(--shadow-ink) / .05),
    0 2px 4px -1px rgb(var(--shadow-ink) / .07); /* @kind shadow */
  --btn-depth-paper-md:
    var(--highlight-top),
    inset 0 -1px 0 rgb(var(--shadow-ink) / .08),
    0 1px 1px rgb(var(--shadow-ink) / .06),
    0 3px 6px -1px rgb(var(--shadow-ink) / .08),
    0 8px 18px -10px rgb(var(--shadow-ink) / .12); /* @kind shadow */
  --btn-depth-paper-lg:
    var(--highlight-top),
    inset 0 -1px 0 rgb(var(--shadow-ink) / .09),
    0 1px 1px rgb(var(--shadow-ink) / .07),
    0 4px 8px -1px rgb(var(--shadow-ink) / .09),
    0 12px 24px -12px rgb(var(--shadow-ink) / .15); /* @kind shadow */

  /* pressed — the control sits back down into the page */
  --btn-depth-press:
    inset 0 2px 4px rgb(0 0 0 / .22),
    inset 0 1px 0 rgb(0 0 0 / .10),
    0 1px 1px rgb(var(--shadow-ink) / .10); /* @kind shadow */
  --btn-depth-paper-press:
    inset 0 2px 4px rgb(var(--shadow-ink) / .13),
    0 1px 1px rgb(var(--shadow-ink) / .05); /* @kind shadow */

  --border-width:1px; /* @kind spacing */
  --ring-width:3px; /* @kind spacing */
  --ring:0 0 0 var(--ring-width) rgb(79 92 178 / .26); /* @kind shadow */
  --ring-offset:0 0 0 2px var(--bg-page); /* @kind shadow */
  --focus-ring:var(--ring-offset),0 0 0 5px rgb(79 92 178 / .26); /* @kind shadow */
}