/* ================================================================
   AFK Legion — Spacing, radii, borders, shadows, motion
   Built on a 4px pixel grid. The signature look is a crisp black
   keyline + chunky wood bevel + a hard offset "pixel" shadow.
   ================================================================ */
:root {
  /* ---- Spacing (4px grid) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Radii (pixel UIs stay chunky, never soft) ---- */
  --radius-0:  0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-keyline: 2px solid var(--frame-outer);   /* the crisp black outline */
  --border-hair:    1px solid var(--ink-900);
  --bevel-width:    4px;   /* wood frame thickness */

  /* ---- Shadows ----
     "pixel" = hard, solid, no blur (offset block, like sprite drop)
     "soft"  = the sprite ground-shadow ellipse feel */
  --shadow-pixel-sm: 0 3px 0 0 var(--ink-900);
  --shadow-pixel:    0 5px 0 0 var(--ink-900);
  --shadow-pixel-wood: 0 4px 0 0 var(--wood-700);
  --shadow-soft:     0 6px 14px rgba(20, 61, 60, 0.28);
  --shadow-soft-lg:  0 14px 34px rgba(20, 61, 60, 0.34);
  --shadow-inset:    inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.18);
  --shadow-slot:     inset 0 3px 6px rgba(0,0,0,0.55);

  /* Sprite drop-shadow filter (for pixel art on light bg) */
  --sprite-shadow: drop-shadow(0 4px 0 rgba(20,61,60,0.28));

  /* ---- Motion ---- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur-med:   220ms; /* @kind other */
  --dur-slow:  420ms; /* @kind other */

  /* ---- Pixel rendering helper value ---- */
  --pixelated: pixelated; /* @kind other */

  /* ---- Layout ---- */
  --panel-pad:    var(--space-5);
  --hud-height:   64px;
  --max-content:  1200px;
}

/* Global helper: keep all pixel art crisp when scaled */
.pixelated,
img.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }