/* Wizebix / Foundation 0.1
 * Opt in with .wz-system. No legacy :root tokens or application styles change.
 * Primitives → semantic roles → components. Theme and density inherit.
 */
.wz-system {
  --wz-white: #ffffff;
  --wz-gray-25: #fcfcfd;
  --wz-gray-50: #f8f9fb;
  --wz-gray-100: #f0f1f5;
  --wz-gray-200: #e2e4eb;
  --wz-gray-300: #c4c8d4;
  --wz-gray-400: #8b91a2;
  --wz-gray-500: #697185;
  --wz-gray-600: #535b6d;
  --wz-gray-700: #383f50;
  --wz-gray-800: #252b38;
  --wz-gray-900: #181c27;
  --wz-gray-950: #11141c;
  --wz-indigo-50: #f0efff;
  --wz-indigo-100: #e4e1ff;
  --wz-indigo-300: #b9b0ff;
  --wz-indigo-400: #9b8afb;
  --wz-indigo-500: #7962ed;
  --wz-indigo-600: #6246d9;
  --wz-indigo-700: #5034bd;
  --wz-indigo-900: #30225d;

  --wz-bg: var(--wz-gray-50);
  --wz-surface: var(--wz-white);
  --wz-surface-subtle: var(--wz-gray-25);
  --wz-surface-hover: var(--wz-gray-100);
  --wz-text: var(--wz-gray-900);
  --wz-text-secondary: var(--wz-gray-600);
  --wz-text-muted: var(--wz-gray-500);
  --wz-border: var(--wz-gray-200);
  --wz-border-control: var(--wz-gray-400);
  --wz-accent: var(--wz-indigo-600);
  --wz-accent-hover: var(--wz-indigo-700);
  --wz-accent-soft: var(--wz-indigo-50);
  --wz-on-accent: var(--wz-white);
  --wz-focus: var(--wz-indigo-600);
  --wz-success: #187448;
  --wz-success-soft: #edf8f1;
  --wz-warning: #946000;
  --wz-warning-soft: #fff7e5;
  --wz-danger: #b7353f;
  --wz-danger-hover: #962933;
  --wz-danger-soft: #fff0f1;
  --wz-info: #226baa;
  --wz-info-soft: #edf5fd;
  --wz-overlay: #11141c66;
  --wz-shadow-sm: 0 1px 2px #181c2705;
  --wz-shadow-float: 0 12px 36px #181c271a, 0 2px 8px #181c270d;

  --wz-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wz-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --wz-text-xs: 0.75rem;
  --wz-text-sm: 0.8125rem;
  --wz-text-md: 0.875rem;
  --wz-text-lg: 1rem;
  --wz-text-xl: 1.25rem;
  --wz-text-2xl: 1.5rem;
  --wz-text-3xl: 2rem;
  --wz-text-display: 2.5rem;
  --wz-weight-regular: 400;
  --wz-weight-medium: 500;
  --wz-weight-semibold: 600;
  --wz-weight-bold: 700;
  --wz-leading-tight: 1.2;
  --wz-leading-body: 1.5;
  --wz-leading-copy: 1.65;

  --wz-space-1: 4px;
  --wz-space-2: 8px;
  --wz-space-3: 12px;
  --wz-space-4: 16px;
  --wz-space-5: 20px;
  --wz-space-6: 24px;
  --wz-space-8: 32px;
  --wz-space-10: 40px;
  --wz-space-12: 48px;
  --wz-space-16: 64px;
  --wz-radius-sm: 4px;
  --wz-radius-md: 6px;
  --wz-radius-lg: 8px;
  --wz-radius-xl: 12px;
  --wz-radius-full: 999px;
  --wz-control-height: 40px;
  --wz-row-height: 40px;
  --wz-cell-space: 6px;
  --wz-touch-target: 44px;
  --wz-duration-fast: 120ms;
  --wz-duration-normal: 180ms;
  --wz-ease: cubic-bezier(.2, 0, 0, 1);
  --wz-z-sticky: 20;
  --wz-z-popover: 40;
  --wz-z-toast: 60;
  color-scheme: light;
  color: var(--wz-text);
  font-family: var(--wz-font);
  font-size: var(--wz-text-md);
  line-height: var(--wz-leading-body);
  -webkit-font-smoothing: antialiased;
}

.wz-system[data-theme='dark'], .wz-system [data-theme='dark'] {
  --wz-bg: #141519;
  --wz-surface: #1c1d22;
  --wz-surface-subtle: #202127;
  --wz-surface-hover: #2b2d35;
  --wz-text: #eeeef3;
  --wz-text-secondary: #b8bcc9;
  --wz-text-muted: #a2a7b7;
  --wz-border: #353740;
  --wz-border-control: #777f93;
  --wz-accent: var(--wz-indigo-300);
  --wz-accent-hover: #cdc7ff;
  --wz-accent-soft: #302744;
  --wz-on-accent: #20163f;
  --wz-focus: var(--wz-indigo-300);
  --wz-success: #80d6a8;
  --wz-success-soft: #1c352a;
  --wz-warning: #ebc26f;
  --wz-warning-soft: #392f1e;
  --wz-danger: #ffa2ab;
  --wz-danger-hover: #ffbac1;
  --wz-danger-soft: #3d252c;
  --wz-info: #8fc8ff;
  --wz-info-soft: #203247;
  --wz-overlay: #00000099;
  --wz-shadow-sm: 0 1px 2px #00000014;
  --wz-shadow-float: 0 12px 36px #0000004d;
  color-scheme: dark;
}

.wz-system[data-density='compact'], .wz-system [data-density='compact'] {
  --wz-control-height: 32px;
  --wz-row-height: 40px;
  --wz-cell-space: 6px;
}

@media (pointer: coarse) {
  .wz-system, .wz-system[data-density='compact'], .wz-system [data-density='compact'] {
    --wz-control-height: 44px;
    --wz-row-height: 56px;
    --wz-cell-space: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wz-system { --wz-duration-fast: 0ms; --wz-duration-normal: 0ms; }
}