:root {
  /* ==========================================================================
   * NON-COLOR SYSTEM TOKENS (SHARED)
   * ======================================================================= */

  /* Border widths */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* ===== Spacing & Layout ===== */
  --spacing-2xs: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Breakpoints & Containers */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* ===== Sizing ===== */
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;

  --component-size-2xs: 8px;
  --component-size-xxs: 12px;
  --component-size-xs: 20px;
  --component-size-sm: 30px;
  --component-size-md: 36px;
  --component-size-lg: 44px;
  --component-size-xl: 435px;
  --sidebar-width: 180px;

  /* Border Radius */
  --border-radius-none: 0px;
  --border-radius-default: 4px;
  --border-radius-rounded: 32px;
  --border-radius-round: 50%;
  --border-radius-sm: 2px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;

  /* Typography */
  --text-max-width: 65ch;

  --font-family:
    system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;

  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;

  /* Semantic typography */
  --font-size-table-header: 13px;
  --line-height-table-header: 16px;
  --font-weight-table-header: var(--font-weight-semibold);

  --font-weight-default: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* Motion */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 400ms;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Elevation & Overlay */
  --overlay-scrim-subtle: rgba(0, 0, 0, 0.2);
  --overlay-scrim: rgba(0, 0, 0, 0.5);
  --backdrop-blur: 8px;

  /* Layers */
  --z-base: 0;

  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-banner: 1150;
  --z-backdrop-drawer: 1145;
  --z-drawer: 1200;
  --z-backdrop-modal: 1245;
  --z-modal: 1250;
  --z-popover: 1300;
  --z-tooltip: 1400;
  --z-toast: 1500;

  /* Skeletons & loaders (structure shared; colors overridden per theme if desired) */
  --spinner-size: 16px;
  --spinner-stroke: 2px;
}

/* Reduced motion (shared) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms;
    --transition-normal: 1ms;
    --transition-slow: 1ms;
  }
  * {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}