:root,
[data-theme='light'] {
  color-scheme: light;
  --ui-bg: #f5f5f5;
  --ui-canvas: #f7f7f7;
  --ui-surface: #ffffff;
  --ui-surface-alt: #fafafa;
  --ui-surface-glass: rgb(255 255 255 / 96%);
  --ui-surface-glass-strong: rgb(255 255 255 / 98%);
  --ui-chrome: #ffffff;
  --ui-control: #f5f5f5;
  --ui-control-hover: rgb(20 20 22 / 4%);
  --ui-control-active: rgb(20 20 22 / 8%);
  --ui-control-selected: #282a2e;
  --ui-text: #242529;
  --ui-text-soft: #292a2e;
  --ui-text-muted: #777a80;
  --ui-text-disabled: #9a9ca1;
  --ui-icon: #25262a;
  --ui-icon-muted: #777a80;
  --ui-icon-disabled: #9a9ca1;
  --ui-on-invert: #ffffff;
  --ui-border: #e5e5e5;
  --ui-border-strong: #d4d4d4;
  --ui-border-translucent: rgb(20 20 22 / 8%);
  --ui-divider: rgb(20 20 22 / 9%);
  --ui-focus: rgb(20 20 22 / 18%);
  --ui-shadow-subtle: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 8%);
  --ui-shadow-popover: 0 1px 2px rgb(0 0 0 / 4%), 0 10px 28px rgb(0 0 0 / 10%);
  --ui-destructive: #e7000b;

  /*
   * Aircraft UI geometry contract
   * -----------------------------
   * Feature packages may choose a semantic size, but the numeric geometry
   * lives here. New controls and surfaces should consume these tokens rather
   * than introduce local heights, radii, gaps or icon sizes.
   */
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aircraft-next-canvas: var(--ui-canvas);
  --aircraft-ui-control-height: 32px;
  --aircraft-ui-control-compact-height: 28px;
  --aircraft-ui-touch-control-size: 40px;
  --aircraft-ui-action-control-size: 44px;
  --aircraft-ui-control-radius: 8px;
  --aircraft-ui-control-gap: 6px;
  --aircraft-ui-control-pad-x: 8px;
  --aircraft-ui-font-size: 13px;
  --aircraft-ui-font-weight: 400;
  --aircraft-ui-line-height: 20px;
  --aircraft-ui-icon-size: 18px;
  --aircraft-ui-icon-small-size: 16px;
  --aircraft-ui-icon-medium-size: 20px;
  --aircraft-ui-icon-touch-size: 22px;
  --aircraft-ui-icon-touch-large-size: 24px;
  --aircraft-ui-icon-action-size: 27px;
  --aircraft-ui-swatch-size: 18px;

  --aircraft-ui-floating-shell-height: 46px;
  --aircraft-ui-touch-shell-height: 44px;
  --aircraft-ui-context-shell-height: 50px;
  --aircraft-ui-context-inner-height: 38px;
  --aircraft-ui-surface-radius: 14px;
  --aircraft-ui-surface-radius-compact: 12px;
  --aircraft-ui-surface-radius-mobile: 16px;
  --aircraft-ui-surface-gap: 8px;
  --aircraft-ui-surface-pad: 6px;
  --aircraft-ui-surface-blur: 18px;
  --aircraft-ui-surface-blur-soft: 16px;
  --aircraft-ui-popover-gap: 8px;
  --aircraft-ui-stack-gap: 12px;
  --aircraft-ui-context-stack-gap: 19px;
  --aircraft-ui-edge-margin: 12px;
  --aircraft-ui-mobile-bottom-offset: 18px;
  --aircraft-ui-press-scale: .94;
  --aircraft-ui-surface-border: 1px solid var(--ui-border-translucent);
}

[data-theme='dark'] {
  color-scheme: dark;

  /* Canonical Aircraft dark UI ramp. Canvas remains an independent concern. */
  --ui-bg: #181818;
  --ui-canvas: #101010;
  --ui-surface: #1c1c1c;
  --ui-surface-alt: #181818;
  --ui-surface-glass: rgb(28 28 28 / 96%);
  --ui-surface-glass-strong: rgb(34 34 34 / 98%);
  --ui-chrome: #1c1c1c;
  --ui-control: #222222;
  --ui-control-hover: #282828;
  --ui-control-active: #303030;
  --ui-control-selected: #f2f2f2;
  --ui-text: #f2f2f2;
  --ui-text-soft: #b6b6b6;
  --ui-text-muted: #8d8d8d;
  --ui-text-disabled: #666666;
  --ui-icon: #f2f2f2;
  --ui-icon-muted: #8d8d8d;
  --ui-icon-disabled: #666666;
  --ui-on-invert: #181818;
  --ui-border: rgb(255 255 255 / 9%);
  --ui-border-strong: rgb(255 255 255 / 14%);
  --ui-border-translucent: rgb(255 255 255 / 9%);
  --ui-divider: rgb(255 255 255 / 7%);
  --ui-focus: rgb(255 255 255 / 20%);
  --ui-shadow-subtle: 0 1px 2px rgb(0 0 0 / 22%), 0 8px 24px rgb(0 0 0 / 22%);
  --ui-shadow-popover: 0 1px 2px rgb(0 0 0 / 24%), 0 10px 28px rgb(0 0 0 / 30%);
  --ui-destructive: #e7000b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--aircraft-next-canvas);
}

body {
  overscroll-behavior: none;
  font-family: var(--font-ui);
  color: var(--ui-text);
}

button,
input,
select {
  font: inherit;
}

/*
 * Aircraft UI primitives
 * ----------------------
 * This file owns tokens and shared visible-control behavior only. Surface
 * packages own their outer shells and placement. They may change geometry when
 * required by the surface, but must compose the controls below rather than
 * redefining independent button/input/select systems.
 */
.aircraft-ui-control,
.aircraft-ui-input,
.aircraft-ui-select,
.aircraft-ui-control-label {
  font-family: var(--font-ui);
  font-size: var(--aircraft-ui-font-size);
  font-weight: var(--aircraft-ui-font-weight);
  line-height: var(--aircraft-ui-line-height);
  letter-spacing: normal;
  text-transform: none;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.aircraft-ui-control {
  display: inline-flex;
  min-height: var(--aircraft-ui-control-height);
  height: var(--aircraft-ui-control-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--aircraft-ui-control-gap);
  padding: 0 var(--aircraft-ui-control-pad-x);
  border: 0;
  border-radius: var(--aircraft-ui-control-radius);
  outline: 0;
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.aircraft-ui-control:disabled,
.aircraft-ui-control[aria-disabled='true'] {
  color: var(--ui-text-disabled);
  cursor: default;
  opacity: .72;
}

@media (hover: hover) and (pointer: fine) {
  .aircraft-ui-control:not(:disabled):not([aria-disabled='true']):not([data-current='true']):not([data-active='true']):not([aria-pressed='true']):not([aria-expanded='true']):hover {
    background: var(--ui-control-hover);
  }
}

.aircraft-ui-control[data-current='true'],
.aircraft-ui-control[data-active='true'],
.aircraft-ui-control[aria-pressed='true'],
.aircraft-ui-control[aria-expanded='true'] {
  background: var(--ui-control-active);
}

.aircraft-ui-control:focus-visible,
.aircraft-ui-input:focus-visible,
.aircraft-ui-select:focus-visible {
  box-shadow: inset 0 0 0 1px var(--ui-focus);
}

.aircraft-ui-icon-button {
  width: var(--aircraft-ui-control-height);
  min-width: var(--aircraft-ui-control-height);
  padding: 0;
}

.aircraft-ui-icon-button > .aircraft-lucide-icon,
.aircraft-ui-control > .aircraft-lucide-icon {
  width: var(--aircraft-ui-icon-size);
  height: var(--aircraft-ui-icon-size);
  flex: 0 0 var(--aircraft-ui-icon-size);
}

.aircraft-ui-control-trailing-icon {
  color: var(--ui-icon-muted);
}

.aircraft-ui-input,
.aircraft-ui-select {
  min-height: var(--aircraft-ui-control-height);
  height: var(--aircraft-ui-control-height);
  min-width: 0;
  padding: 0 var(--aircraft-ui-control-pad-x);
  border: 0;
  border-radius: var(--aircraft-ui-control-radius);
  outline: 0;
  background: transparent;
  color: var(--ui-text);
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.aircraft-ui-number-input {
  font-variant-numeric: tabular-nums;
}

.aircraft-ui-divider {
  display: block;
  width: 1px;
  flex: 0 0 1px;
  background: var(--ui-divider);
  pointer-events: none;
}

.aircraft-lucide-icon {
  display: block;
  width: var(--aircraft-ui-icon-size);
  height: var(--aircraft-ui-icon-size);
  background: currentColor;
  -webkit-mask: var(--lucide-mask) center / contain no-repeat;
  mask: var(--lucide-mask) center / contain no-repeat;
  pointer-events: none;
}

/* Optional semantic size primitives for new UI. Existing surfaces may consume
 * the same tokens directly when their composition needs explicit geometry. */
.aircraft-ui-control-compact {
  min-height: var(--aircraft-ui-control-compact-height);
  height: var(--aircraft-ui-control-compact-height);
}

.aircraft-ui-touch-control {
  width: var(--aircraft-ui-touch-control-size);
  min-width: var(--aircraft-ui-touch-control-size);
  height: var(--aircraft-ui-touch-control-size);
  min-height: var(--aircraft-ui-touch-control-size);
  padding: 0;
  border-radius: var(--aircraft-ui-surface-radius);
}

.aircraft-ui-action-control {
  width: var(--aircraft-ui-action-control-size);
  min-width: var(--aircraft-ui-action-control-size);
  height: var(--aircraft-ui-action-control-size);
  min-height: var(--aircraft-ui-action-control-size);
  padding: 0;
}

/* Aircraft-owned select picker. The native select stays the value/change
 * boundary; this surface owns the visible interaction on every platform. */
.aircraft-ui-select {
  cursor: pointer;
  padding-right: 24px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 11px) 50%,
    calc(100% - 7px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px;
}

.aircraft-ui-select[data-open='true'] {
  background-color: var(--ui-control-active);
}

.aircraft-ui-select-menu {
  position: fixed;
  z-index: 120;
  display: flex;
  min-width: 120px;
  max-width: calc(100vw - 16px);
  max-height: min(240px, calc(100dvh - 16px));
  flex-direction: column;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px;
  border: var(--aircraft-ui-surface-border);
  border-radius: var(--aircraft-ui-surface-radius-compact);
  background: var(--ui-surface-glass-strong);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-popover);
  backdrop-filter: blur(var(--aircraft-ui-surface-blur));
  -webkit-backdrop-filter: blur(var(--aircraft-ui-surface-blur));
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.aircraft-ui-select-menu::-webkit-scrollbar {
  display: none;
}

.aircraft-ui-select-option {
  width: 100%;
  min-width: 0;
  min-height: var(--aircraft-ui-control-height);
  height: var(--aircraft-ui-control-height);
  justify-content: space-between;
  gap: var(--aircraft-ui-surface-gap);
  padding: 0 var(--aircraft-ui-control-pad-x);
  border-radius: var(--aircraft-ui-control-radius);
  color: var(--ui-text);
  text-align: left;
}

.aircraft-ui-select-option[data-current='true'] {
  background: var(--ui-control-active);
}

.aircraft-ui-select-option .aircraft-ui-control-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aircraft-ui-select-option-check {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  color: var(--ui-icon-muted);
}

/* Canvas presentation baseline; editor controls live in their own surfaces. */
#aircraft-next-canvas,
#aircraft-next-overlay {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
}

#aircraft-next-canvas {
  z-index: 0;
  background: var(--aircraft-next-canvas);
  touch-action: none;
}

#aircraft-next-overlay {
  z-index: 1;
  background: transparent;
  pointer-events: none;
}

#aircraft-next-canvas[data-tool='selection'] {
  cursor: default;
}

#aircraft-next-canvas[data-tool='hand'] {
  cursor: grab;
}

#aircraft-next-canvas[data-tool='hand']:active {
  cursor: grabbing;
}