/* ============================================================
   VARSAT — Spacing, radius, shadow, motion, layout tokens
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---- Border radius ----
     Structural / industrial: sharp by default. Radius is reserved
     and capped at 12px (modals). Pills only for chips & tags.    */
  --radius-none: 0px;
  --radius-xs:   2px;   /* badges, tags */
  --radius-sm:   4px;   /* inputs, buttons, small cards */
  --radius-md:   8px;   /* cards, panels */
  --radius-lg:   12px;  /* modals, drawers — maximum */
  --radius-full: 9999px;/* chips, pill toggles only */

  /* ---- Shadows (cool, low, tight — never colored) ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(30,29,30,0.08), 0 1px 2px rgba(30,29,30,0.06);
  --shadow-md: 0 4px 12px rgba(30,29,30,0.10), 0 2px 4px rgba(30,29,30,0.06);
  --shadow-lg: 0 10px 30px rgba(30,29,30,0.12), 0 4px 8px rgba(30,29,30,0.06);
  --shadow-xl: 0 24px 48px rgba(30,29,30,0.16), 0 8px 16px rgba(30,29,30,0.08);

  /* ---- Motion ---- */
  --duration-instant: 100ms; /* @kind other */
  --duration-fast:    200ms; /* @kind other */
  --duration-base:    300ms; /* @kind other */
  --duration-slow:    500ms; /* @kind other */
  --duration-enter:   400ms; /* @kind other */

  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* ---- Layout: content widths ---- */
  --content-full:    100%; /* @kind other */
  --content-wide:    1280px; /* @kind other */
  --content-default: 1100px; /* @kind other */
  --content-text:    720px; /* @kind other */
  --content-narrow:  560px; /* @kind other */

  /* ---- Layout: breakpoints (reference) ---- */
  --bp-mobile-sm: 375px; /* @kind other */
  --bp-mobile:    767px; /* @kind other */
  --bp-tablet:    1024px; /* @kind other */
  --bp-desktop:   1280px; /* @kind other */
  --bp-wide:      1440px; /* @kind other */

  /* ---- Z-index ---- */
  --z-sticky:  90; /* @kind other */
  --z-header:  100; /* @kind other */
  --z-drawer:  200; /* @kind other */
  --z-modal:   300; /* @kind other */
  --z-toast:   400; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; /* @kind other */
    --duration-fast:    0ms; /* @kind other */
    --duration-base:    0ms; /* @kind other */
    --duration-slow:    0ms; /* @kind other */
    --duration-enter:   0ms; /* @kind other */
  }
}