:root {
  /* Keep browser-standard rem sizing */
  font-size: 16px;

  /* Base sizing */
  --rem: 16px;
  --base: calc(var(--rem) * 0.875);

  /* Spacing scale */
  --space-2xs: calc(var(--base) * 0.125);
  --space-xs: calc(var(--base) * 0.25);
  --space-sm: calc(var(--base) * 0.5);
  --space-sm-plus: calc(var(--base) * 0.75);
  --space-md: var(--base);
  --space-lg: calc(var(--base) * 1.5);
  --space-xl: calc(var(--base) * 2);
  --space-2xl: calc(var(--base) * 3);
  --space-2xl-plus: calc(var(--base) * 2.5);
  --space-3xl: calc(var(--base) * 4);
  --space-4xl: calc(var(--base) * 5);

  /* Typography */
  --font-family-ui: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-root: var(--base);
  --font-size-control: var(--rem);
  --font-size-xs: calc(var(--base) * 0.75);
  --font-size-sm: calc(var(--base) * 0.9);
  --font-size-md: var(--base);
  --font-size-md-plus: calc(var(--base) * 1.1);
  --font-size-lg: calc(var(--base) * 1.2);
  --font-size-lg-plus: calc(var(--base) * 1.4);
  --font-size-xl: calc(var(--base) * 1.6);

  /* Border */
  --border-radius: 3px;

  /* Transitions */
  --transition-speed: 0.2s;
  --transition-timing: ease;
  --transition-base: 200ms ease-in-out;

  /* Focus (accessibility) */
  --focus-ring-width: 1px;
  --focus-ring-offset: 1px;
  --focus-ring-offset-inset: calc(-1 * var(--focus-ring-offset));
  --focus-outline: var(--focus-ring-width) solid var(--color-focus-ring);

  /* Layout */
  --layout-header-height: 56px;
  --layout-sidebar-width: 300px;
  --layout-sidebar-column-width: 280px;
  --layout-modal-max-width: 400px;
  --layout-modal-gutter: var(--space-md);

  /* Shadows */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 0.2);

  /* Z-index (stacking order) */
  --z-menu: 1000;
  --z-overlay: 1020;
  --z-panel: 1030;
  --z-modal: 2000;
  --z-sticky: 10;
  --z-toast: 10000;

  /* Component sizes */
  --size-skeleton-line-height: calc(var(--base) * 0.95);

  /* Inline Create Input - base defaults */
  --inline-input-background: transparent;
  --inline-input-border: var(--color-border);
  --inline-input-color: var(--color-surface-text);
  --inline-input-font-size: var(--font-size-md);
  --inline-input-font-weight: 400;
  --inline-input-padding: var(--space-sm) var(--space-md);
  --inline-input-min-height: 36px;
  --inline-input-border-radius: var(--border-radius);
  --inline-input-placeholder: var(--color-text-muted);
  --inline-input-focus-border: var(--color-action-indicator);

  /* Scrollbars */
  --scrollbar-size: 10px;
  --scrollbar-thumb: rgba(128, 128, 128, 0.4);
  --scrollbar-track: transparent;

  font-family: var(--font-family-ui);
}

/* Increase font sizes on mobile for better readability */
@media (max-width: 768px) {
  :root {
    --base: var(--rem);

    --font-size-root: var(--base);
    --font-size-sm: calc(var(--rem) * 1);
    --font-size-md: calc(var(--rem) * 1.125);
    --font-size-md-plus: calc(var(--rem) * 1.125);
    --font-size-lg: calc(var(--rem) * 1.375);
    --font-size-xl: calc(var(--rem) * 1.75);
  }
}

:root,
:root.theme-light {
  color-scheme: light;

  /* Header */
  --color-header: #334155;
  --color-header-text: #ffffff;
  --color-header-text-muted: #cbd5e1;
  --color-header-button-hover: rgba(255, 255, 255, 0.12);

  /* Core colors */
  --color-menu: #e2e8f0;
  --color-menu-dark: #cbd5e1;
  --color-menu-content: #e2e8f0;
  --color-menu-border: #94a3b8;
  --color-menu-text: #1e293b;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-surface-text: #1e293b;
  --color-surface-text-muted: #64748b;
  --color-border: #cbd5e1;
  --color-border-subtle: #e2e8f0;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-action: #2563eb;
  --color-action-hover: #1d4ed8;

  /* Aliases */
  --color-text-muted: var(--color-surface-text-muted);
  --color-action-indicator: var(--color-action);

  /* Background */
  --color-background: #f1f5f9;
  --color-outer: #0f172a;

  /* Scrollbars */
  --scrollbar-thumb: rgba(0, 0, 0, 0.22);

  /* Overlay colors */
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* Semantic colors */
  --color-error: #dc2626;
  --color-error-soft: #f87171;

  /* Focus ring */
  --color-focus-ring: #1d4ed8;

  /* Shadow colors */
  --color-shadow: rgba(0, 0, 0, 0.22);
}

:root.theme-dark {
  color-scheme: dark;

  /* Header */
  --color-header: #1e293b;
  --color-header-text: #ffffff;
  --color-header-text-muted: #94a3b8;
  --color-header-button-hover: rgba(255, 255, 255, 0.1);

  /* Core colors */
  --color-menu: #1e293b;
  --color-menu-dark: #1e293b;
  --color-menu-content: #1e293b;
  --color-menu-border: #334155;
  --color-menu-text: #ffffff;
  --color-surface: #0f172a;
  --color-surface-hover: #1e293b;
  --color-surface-text: #e2e8f0;
  --color-surface-text-muted: #94a3b8;
  --color-border: #334155;
  --color-border-subtle: #1e293b;
  --color-accent: #3b82f6;
  --color-accent-hover: #60a5fa;
  --color-action: #3b82f6;
  --color-action-hover: #60a5fa;

  /* Aliases */
  --color-text-muted: var(--color-surface-text-muted);
  --color-action-indicator: var(--color-action);

  /* Background */
  --color-background: #1e293b;
  --color-outer: #000000;

  /* Scrollbars */
  --scrollbar-thumb: rgba(148, 163, 184, 0.3);

  /* Overlay colors */
  --color-overlay: rgba(0, 0, 0, 0.7);

  /* Semantic colors */
  --color-error: #ef4444;
  --color-error-soft: #f87171;

  /* Focus ring */
  --color-focus-ring: #93c5fd;

  /* Shadow colors */
  --color-shadow: rgba(0, 0, 0, 0.6);
}

/* Global utility classes */
.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

:root {
  /* JS sets these from visualViewport for mobile keyboard handling. */
  --app-dvh: 100dvh;
  --keyboard-inset: 0px;
}

html,
body {
  height: 100%;
  width: 100%;
  background: var(--color-outer);
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-root);
  overflow: hidden; /* app handles scrolling internally */
}

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  body {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}