/* Syfröst — spacing, layout, radius, elevation, motion, interaction. */
:root {
  --spacing-0: 0;
  --spacing-1: 0.25rem;  /* 4 */
  --spacing-2: 0.5rem;   /* 8 */
  --spacing-3: 0.75rem;  /* 12 */
  --spacing-4: 1rem;     /* 16 */
  --spacing-5: 1.25rem;  /* 20 */
  --spacing-6: 1.5rem;   /* 24 */
  --spacing-8: 2rem;     /* 32 */
  --spacing-10: 2.5rem;  /* 40 */
  --spacing-12: 3rem;    /* 48 */
  --spacing-16: 4rem;    /* 64 */
  --spacing-20: 5rem;    /* 80 */
  --spacing-24: 6rem;    /* 96 */
  --spacing-32: 8rem;    /* 128 */

  --layout-content-width: 1390px;
  --layout-content-narrow: 842px;
  --layout-content-wide: 1620px;
  --layout-edge-padding: 1rem;
  --layout-boxed-padding: 2rem;
  --layout-sidebar-width: 248px;
  --layout-topbar-height: 60px;

  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 30px; /* Emagma large radius — hero panels */
  --radius-full: 9999px;

  /* Cool, blue-tinted elevation */
  --shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
  --shadow-xs: 0 1px 2px rgba(12, 26, 85, 0.06);
  --shadow-sm: 0 1px 2px rgba(12, 26, 85, 0.05), 0 2px 6px -1px rgba(12, 26, 85, 0.06);
  --shadow-md: 0 2px 4px rgba(12, 26, 85, 0.04), 0 12px 24px -8px rgba(12, 26, 85, 0.12);
  --shadow-lg: 0 4px 8px rgba(12, 26, 85, 0.04), 0 24px 48px -12px rgba(12, 26, 85, 0.22);
  --shadow-brand: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px -6px rgba(19, 39, 122, 0.55);
  --shadow-glow-vivid: 0 10px 36px -10px rgba(155, 59, 156, 0.55), 0 4px 14px -6px rgba(228, 29, 35, 0.35);
  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  --blur-glass: 16px; /* @kind other */

  --duration-instant: 100ms; /* @kind other */
  --duration-fast: 200ms; /* @kind other */
  --duration-normal: 300ms; /* @kind other */
  --duration-slow: 500ms; /* @kind other */
  --easing-default: cubic-bezier(0.25, 0.1, 0.25, 1); /* @kind other */
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --easing-in: cubic-bezier(0.42, 0, 1, 1); /* @kind other */
  --easing-in-out: cubic-bezier(0.42, 0, 0.58, 1); /* @kind other */

  --interaction-focus-ring-width: 2px; /* @kind other */
  --interaction-focus-ring-offset: 2px; /* @kind other */
  --interaction-target-min-size: 2.75rem; /* @kind other */
  --interaction-disabled-opacity: 0.4; /* @kind other */

  --z-dropdown: 1000; /* @kind other */
  --z-overlay: 1100; /* @kind other */
  --z-dialog: 1200; /* @kind other */
  --z-toast: 1300; /* @kind other */
  --z-tooltip: 1400; /* @kind other */
}