/* IGS Design System v1 — canonical design tokens.
   Module styles may map semantic aliases to these variables, but must not
   invent a second visual scale for shared controls. */
:root {
  color-scheme: light;
  --igs-color-canvas: #f8fafc;
  --igs-color-surface: #ffffff;
  --igs-color-surface-subtle: #f8fafc;
  --igs-color-surface-muted: #f1f5f9;
  --igs-color-border: #e2e8f0;
  --igs-color-border-strong: #cbd5e1;
  --igs-color-text: #0f172a;
  --igs-color-text-soft: #334155;
  --igs-color-muted: #64748b;
  --igs-color-placeholder: #94a3b8;
  --igs-color-primary: #4f46e5;
  --igs-color-primary-hover: #4338ca;
  --igs-color-primary-soft: #eef2ff;
  --igs-color-success: #15803d;
  --igs-color-success-soft: #ecfdf5;
  --igs-color-warning: #b45309;
  --igs-color-warning-soft: #fffbeb;
  --igs-color-danger: #b91c1c;
  --igs-color-danger-hover: #991b1b;
  --igs-color-danger-soft: #fef2f2;
  --igs-color-info: #0369a1;
  --igs-color-info-soft: #f0f9ff;
  --igs-focus-ring: rgba(79, 70, 229, .18);
  --igs-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --igs-shadow-sm: 0 5px 18px rgba(15, 23, 42, .05);
  --igs-shadow-md: 0 12px 30px rgba(15, 23, 42, .075);
  --igs-shadow-lg: 0 20px 48px rgba(15, 23, 42, .10);
  --igs-radius-xs: 6px;
  --igs-radius-sm: 8px;
  --igs-radius-md: 10px;
  --igs-radius-lg: 12px;
  --igs-radius-xl: 16px;
  --igs-radius-2xl: 20px;
  --igs-radius-pill: 999px;
  --igs-space-1: 4px;
  --igs-space-2: 8px;
  --igs-space-3: 12px;
  --igs-space-4: 16px;
  --igs-space-5: 20px;
  --igs-space-6: 24px;
  --igs-space-8: 32px;
  --igs-space-10: 40px;
  --igs-control-height-sm: 34px;
  --igs-control-height: 42px;
  --igs-control-height-lg: 46px;
  --igs-control-padding-x: 12px;
  --igs-font-xs: .68rem;
  --igs-font-sm: .76rem;
  --igs-font-md: .84rem;
  --igs-font-lg: 1rem;
  --igs-font-xl: 1.35rem;
  --igs-font-2xl: 1.7rem;
  --igs-font-weight-normal: 450;
  --igs-font-weight-medium: 650;
  --igs-font-weight-strong: 800;
  --igs-font-weight-heavy: 900;
  --igs-line-normal: 1.7;
  --igs-line-relaxed: 1.9;
  --igs-page-max: 1500px;
  --igs-page-narrow: 780px;
  --igs-page-gap: 18px;
  --igs-table-row-min: 46px;
  --igs-transition-fast: 140ms ease;
  --igs-transition-normal: 180ms ease;
  --igs-z-dropdown: 1100;
  --igs-z-dialog: 1300;
  --igs-z-toast: 1500;
}

html.dark {
  color-scheme: dark;
  --igs-color-canvas: #0b1220;
  --igs-color-surface: #111827;
  --igs-color-surface-subtle: #172033;
  --igs-color-surface-muted: #1e293b;
  --igs-color-border: #334155;
  --igs-color-border-strong: #475569;
  --igs-color-text: #f8fafc;
  --igs-color-text-soft: #e2e8f0;
  --igs-color-muted: #94a3b8;
  --igs-color-placeholder: #64748b;
  --igs-color-primary: #818cf8;
  --igs-color-primary-hover: #a5b4fc;
  --igs-color-primary-soft: #252551;
  --igs-color-success: #4ade80;
  --igs-color-success-soft: rgba(21, 128, 61, .16);
  --igs-color-warning: #fbbf24;
  --igs-color-warning-soft: rgba(180, 83, 9, .15);
  --igs-color-danger: #f87171;
  --igs-color-danger-hover: #fca5a5;
  --igs-color-danger-soft: rgba(185, 28, 28, .15);
  --igs-color-info: #38bdf8;
  --igs-color-info-soft: rgba(3, 105, 161, .18);
  --igs-focus-ring: rgba(129, 140, 248, .25);
  --igs-shadow-xs: 0 1px 2px rgba(0, 0, 0, .12);
  --igs-shadow-sm: 0 7px 20px rgba(0, 0, 0, .16);
  --igs-shadow-md: 0 16px 38px rgba(0, 0, 0, .20);
  --igs-shadow-lg: 0 24px 58px rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --igs-transition-fast: 0ms linear;
    --igs-transition-normal: 0ms linear;
  }
}

/* v0.47.26 — shared compact-layout dimensions. */
:root {
  --igs-form-compact: 440px;
  --igs-content-compact: 820px;
  --igs-code-max-height: 24rem;
  --igs-legacy-scroll-max-height: 340px;
}

/* v0.47.27 — Unified Component Contract tokens.
   These values are shared by native controls, legacy bridges and new IGS UI
   components. Modules may compose them, but must not create a parallel scale. */
:root {
  --igs-control-height-xs: 30px;
  --igs-control-min-touch: 40px;
  --igs-choice-size: 18px;
  --igs-control-disabled-opacity: .58;
  --igs-control-placeholder-opacity: 1;
  --igs-table-cell-px: 12px;
  --igs-table-cell-py: 10px;
  --igs-table-header-bg: var(--igs-color-surface-subtle);
  --igs-table-row-hover: color-mix(in srgb, var(--igs-color-primary) 4%, transparent);
  --igs-menu-min-width: 220px;
  --igs-menu-max-width: min(360px, calc(100vw - 24px));
  --igs-dialog-width: min(560px, calc(100vw - 32px));
  --igs-dialog-width-lg: min(920px, calc(100vw - 32px));
  --igs-dialog-backdrop: rgba(15, 23, 42, .46);
  --igs-state-min-height: 150px;
  --igs-pagination-size: 36px;
}