/* Theovya — Spacing (8px base, 4px micro), radii, icon sizes, z-layers, motion, layout. */
:root{
  /* Spacing scale — every value a multiple of 4 */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:40px;  --space-8:48px; /* touch-target floor */
  --space-9:64px;  --space-10:80px; --space-11:120px;

  /* Radii — 2px action elements, 4px containers, 100px pills */
  --radius-action:2px;   /* buttons, inputs */
  --radius-card:4px;     /* cards, containers */
  --radius-pill:100px;   /* tags, badges, toggle, radio */

  /* Icon sizes (Phosphor) */
  --icon-xs:12px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-xl:32px; --icon-2xl:48px;

  /* Z-axis layers */
  --z-base:0; /* @kind other */
  --z-raised:10; /* @kind other */
  --z-overlay:100; /* @kind other */
  --z-toast:200; /* @kind other */
  --z-tooltip:300; /* @kind other */
  --z-top:400; /* @kind other */

  /* Motion — never spring/bounce */
  --duration-micro:100ms;  /* @kind other */
  --duration-reveal:240ms; /* @kind other */
  --ease-default:ease-out; /* @kind other */

  /* Layout */
  --grid-max-width:1360px;
  --nav-height-desktop:72px;
  --nav-height-mobile:60px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}