/* SEWMA spacing, radius, shadow, motion & layout tokens — variant B «Svět»
   B spacing (px) maps onto the rem scale by value: 4→1, 8→2, 12→3, 16→4, 24→6, 32→8,
   48→12, 64→16, 96→24, 128→32, 160→40. */
:root {
  /* Spacing scale (rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Corner radii — B: 4 tags/captcha, 8 fields, 14 cards, 24 form panel, pills for buttons and tabs */
  --radius-xs: 0.25rem;   /* B --radius-xs 4px */
  --radius-sm: 0.375rem;  /* 6px, focus ring */
  --radius-md: 0.5rem;    /* B --radius-sm 8px */
  --radius-lg: 0.875rem;  /* B --radius-md 14px */
  --radius-xl: 1.5rem;    /* B --radius-lg 24px */
  --radius-2xl: 2rem;
  --radius-full: 999px;   /* B --radius-pill */

  /* Elevation — B --shadow-1..3 (sm, md, lg); xs is the first layer of --shadow-1 */
  --shadow-xs: 0 1px 2px rgb(11 26 51 / .06);
  --shadow-sm: 0 1px 2px rgb(11 26 51 / .06), 0 4px 12px -6px rgb(11 26 51 / .12);
  --shadow-md: 0 2px 4px rgb(11 26 51 / .05), 0 18px 40px -22px rgb(11 26 51 / .32);
  --shadow-lg: 0 4px 8px rgb(11 26 51 / .08), 0 40px 80px -36px rgb(11 26 51 / .45);

  /* Motion — expo-out for travel, a standard ease for state changes */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --transition-interactive: 240ms cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  /* Content widths and page frame */
  --content-narrow: 720px;
  --content-default: 1100px;
  --content-wrap: 1200px;             /* B --wrap */
  --content-wide: 1320px;
  --content-gutter: clamp(16px, 4vw, 40px); /* B --gutter */
  --header-height: 72px;              /* B --header-h */
}

/* Deeper shadows with a top highlight on dark surfaces (B dark --shadow-1..3) */
[data-theme='dark'] {
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 4px 12px -6px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .05);
  --shadow-md: 0 2px 4px rgb(0 0 0 / .3), 0 18px 40px -22px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .06);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / .35), 0 40px 80px -36px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06);
}