/* HoloPlaza TCG — radii, shadows, motion.
   8px is the house radius: buttons, cards, inputs, badges, panels. Pills
   (999px/20px) are reserved for the header search, counters and filter chips. */
:root{
  --radius-xs:4px;    /* condition/game badges, small chips */
  --radius-sm:6px;    /* selects, small buttons, quantity stepper ends */
  --radius:8px;       /* DEFAULT — everything unless stated otherwise */
  --radius-md:10px;   /* scan feedback banner */
  --radius-lg:14px;   /* scan input (the one oversized field) */
  --radius-pill:20px; /* filter/game tabs, status badges */
  --radius-round:999px; /* header search bar, cart counter */
  --radius-circle:50%;  /* avatars, timeline nodes */

  --border-w:1px; /* @kind spacing */
  --border-w-focus:2px; /* @kind spacing */
  --border-w-scan:3px; /* @kind spacing */
  --border-w-tile-hover:10px; /* @kind spacing */ /* homepage tiles grow a thick gold/blue border */

  /* Light theme (default): soft, low-alpha shadows on white. */
  --shadow-card:0 2px 10px rgba(5,21,24,.10);
  --shadow-card-accent:0 4px 12px rgba(187,24,35,.14);
  --shadow-dropdown:0 12px 30px rgba(5,21,24,.16);
  --shadow-float:0 4px 16px rgba(5,21,24,.18);
  --shadow-scan:0 0 20px rgba(187,24,35,.12),inset 0 1px 3px rgba(5,21,24,.10);
  --shadow-scan-focus:0 0 26px rgba(187,24,35,.26),inset 0 1px 3px rgba(5,21,24,.10);
  --glow-active:0 0 0 3px rgba(187,24,35,.18);
  --focus-outline:2px solid var(--accent); /* @kind other */
  --focus-outline-offset:2px; /* @kind spacing */

  --dur-fast:.15s; /* @kind other */
  --dur:.2s; /* @kind other */
  --dur-slow:.3s; /* @kind other */
  --ease:ease; /* @kind other */
  --transition-color:color .15s,border-color .15s,background .15s; /* @kind other */
  --transition-card:border-color .2s ease,box-shadow .2s ease; /* @kind other */
  --lift-hover:translateY(-2px); /* @kind other */ /* album/collection cards only */

  /* The holographic sheen of a foil card, in pale pastels. It is the RING of the
     Holo Premium medal — used nowhere else, and identical in both themes. */
  --holo-foil:conic-gradient(from 210deg,#ffe9a8 0deg,#ffd0e0 62deg,#dcd4ff 124deg,#c9ecff 186deg,#cdf7e2 248deg,#fdf3c4 310deg,#ffe9a8 360deg); /* @kind color */
}

/* Dark theme keeps the original hard, dark shadows and the orange glow. */
:root[data-theme="dark"]{
  --shadow-card:0 2px 12px rgba(0,0,0,.4);
  --shadow-card-accent:0 4px 12px rgba(255,140,66,.1);
  --shadow-dropdown:0 12px 30px rgba(0,0,0,.4);
  --shadow-float:0 4px 16px rgba(0,0,0,.35);
  --shadow-scan:0 0 20px rgba(255,140,66,.15),inset 0 1px 3px rgba(0,0,0,.5);
  --shadow-scan-focus:0 0 30px rgba(255,140,66,.35),inset 0 1px 3px rgba(0,0,0,.5);
  --glow-active:0 0 0 3px rgba(255,140,66,.2);
}