/* Generated from library/contracts/design-tokens.json v0.2.0 by tools/build-css.ts. Do not edit. */
/* Import this once, then one theme stylesheet (library/theme/<name>.css). */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-row: var(--space-3);
  --space-field: var(--space-4);
  --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-1: 11px;
  --font-size-2: 12px;
  --font-size-3: 14px;
  --font-size-4: 16px;
  --font-size-5: 20px;
  --font-size-6: 24px;
  --font-size-7: 32px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-line-height-tight: 1.25;
  --font-line-height-normal: 1.5;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --motion-duration-fast: 100ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 300ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --layer-base: 0;
  --layer-sticky: 100;
  --layer-dropdown: 200;
  --layer-modal: 300;
  --layer-toast: 400;
  --size-control-sm: 28px;
  --size-control-md: 36px;
  --size-control-lg: 40px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --layout-sidebar: 240px;
  --layout-content-max: 1280px;
  --layout-form-max: 720px;
  --layout-breakpoint-sm: 640px;
  --layout-breakpoint-md: 768px;
  --layout-breakpoint-lg: 1024px;
  --layout-breakpoint-xl: 1280px;
}

/* Density: compact tightens rows and field rhythm and drops body to 13px; nothing else moves. */
[data-density="compact"] {
  --space-row: var(--space-2);
  --space-field: var(--space-3);
  --font-size-3: 13px;
}

/* Base rules — binding on every component. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
html {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-3);
  line-height: var(--font-line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
}

/* Tabular figures wherever numbers are compared down a column. */
table, td, th, .tabular { font-variant-numeric: tabular-nums; }

/* Focus is always visible: 2px ring in the focus color. */
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

/* Disabled is 45% opacity with hover and focus effects removed. */
:disabled, [aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Motion only confirms a user-caused change; reduced-motion switches all of it off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Text styles — composed from font.* tokens; use the class or copy the declarations. */
.type-body { font-family: var(--font-family-sans); font-size: var(--font-size-3); font-weight: var(--font-weight-regular); line-height: var(--font-line-height-normal); }
.type-body-strong { font-family: var(--font-family-sans); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); line-height: var(--font-line-height-normal); }
.type-caption { font-family: var(--font-family-sans); font-size: var(--font-size-2); font-weight: var(--font-weight-regular); line-height: var(--font-line-height-normal); }
.type-label { font-family: var(--font-family-sans); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); line-height: var(--font-line-height-tight); letter-spacing: 0.04em; }
.type-heading-1 { font-family: var(--font-family-sans); font-size: var(--font-size-6); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-tight); }
.type-heading-2 { font-family: var(--font-family-sans); font-size: var(--font-size-5); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-tight); }
.type-heading-3 { font-family: var(--font-family-sans); font-size: var(--font-size-4); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-tight); }
.type-display { font-family: var(--font-family-sans); font-size: var(--font-size-7); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-tight); }
.type-code { font-family: var(--font-family-mono); font-size: var(--font-size-2); font-weight: var(--font-weight-regular); line-height: var(--font-line-height-normal); }