:root {
  color-scheme: light;

  --oz-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --oz-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --oz-font-size-body: 13px;
  --oz-font-size-small: 12px;
  --oz-font-size-label: 12px;
  --oz-font-size-caption: 11px;
  --oz-font-size-h1: 20px;
  --oz-font-size-h2: 18px;
  --oz-font-size-h3: 15px;

  --oz-line-height-body: 1.5;
  --oz-line-height-heading: 1.25;
  --oz-line-height-tight: 1.2;

  --oz-spacing-xxs: 2px;
  --oz-spacing-xs: 4px;
  --oz-spacing-sm: 8px;
  --oz-spacing-md: 12px;
  --oz-spacing-lg: 16px;
  --oz-spacing-xl: 20px;
  --oz-spacing-2xl: 24px;

  --oz-radius-xs: 4px;
  --oz-radius-sm: 4px;
  --oz-radius-md: 8px;
  --oz-radius-lg: 12px;
  --oz-radius-pill: 999px;

  --oz-color-background: #f3f3f3;
  --oz-color-surface: #ffffff;
  --oz-color-surface-subtle: #fafaf9;
  --oz-color-surface-selected: #eef4ff;
  --oz-color-text: #032d60;
  --oz-color-text-body: #181818;
  --oz-color-text-weak: #444444;
  --oz-color-border: #c9c9c9;
  --oz-color-border-soft: #dddbda;
  --oz-color-brand: #0176d3;
  --oz-color-brand-hover: #014486;
  --oz-color-brand-active: #032d60;
  --oz-color-brand-rgb: 1, 118, 211;
  --oz-color-row-hover: #f3f3f3;
  --oz-color-row-selected: #eef4ff;
  --oz-color-success: #2e844a;
  --oz-color-warning: #fe9339;
  --oz-color-danger: #ba0517;
  --oz-color-scrim-rgb: 15, 23, 42;

  --oz-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.07);
  --oz-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.10);
  --oz-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.16);
  --oz-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.24);

  --oz-height-header: 48px;
  --oz-height-context-bar: 40px;
  --oz-height-mobile-header: 52px;
  --oz-height-button: 30px;
  --oz-height-button-small: 28px;
  --oz-height-button-touch: 42px;
  --oz-height-input: 30px;
  --oz-height-console-tab: 34px;
  --oz-size-logo: 32px;
  --oz-size-icon-tile: 40px;

  --oz-padding-card: 16px;
  --oz-padding-card-compact: 10px;
  --oz-padding-modal: 20px;
  --oz-padding-page-header: 16px 20px;
  --oz-padding-page-gutter: 16px;
  --oz-table-cell-y: 5px;
  --oz-table-cell-x: 12px;
  --oz-sidebar-width: 320px;

  --oz-z-base: 1;
  --oz-z-sticky: 20;
  --oz-z-header: 40;
  --oz-z-mobile: 60;
  --oz-z-popover: 80;
  --oz-z-modal: 90;
  --oz-z-toast: 100;

  --oz-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Compatibility aliases for existing app CSS */
  --oz-color-page: var(--oz-color-background);
  --oz-color-surface-soft: var(--oz-color-surface-subtle);
  --oz-color-muted: var(--oz-color-text-weak);
  --oz-color-brand-strong: var(--oz-color-brand-active);
  --oz-shadow-popover: var(--oz-shadow-dropdown);
  --oz-topbar-height: var(--oz-height-header);
  --oz-nav-height: var(--oz-height-context-bar);
  --oz-mobile-topbar-height: var(--oz-height-mobile-header);
  --oz-button-height: var(--oz-height-button);
  --oz-button-height-small: var(--oz-height-button-small);
  --oz-button-height-touch: var(--oz-height-button-touch);
  --oz-input-height: var(--oz-height-input);
  --oz-logo-size: var(--oz-size-logo);
  --oz-icon-tile-size: var(--oz-size-icon-tile);
  --oz-card-padding: var(--oz-padding-card);
  --oz-card-padding-compact: var(--oz-padding-card-compact);
  --oz-modal-padding: var(--oz-padding-modal);
  --oz-page-gutter: var(--oz-padding-page-gutter);
  --oz-space-1: var(--oz-spacing-xs);
  --oz-space-2: var(--oz-spacing-sm);
  --oz-space-3: var(--oz-spacing-md);
  --oz-space-4: var(--oz-spacing-lg);
  --oz-space-5: var(--oz-spacing-xl);
  --oz-space-6: var(--oz-spacing-2xl);

  --bg: var(--oz-color-background);
  --card: var(--oz-color-surface);
  --text: var(--oz-color-text-body);
  --muted: var(--oz-color-text-weak);
  --line: var(--oz-color-border);
  --line-soft: var(--oz-color-border-soft);
  --primary: var(--oz-color-brand);
  --primary-dark: var(--oz-color-brand-active);
  --success: var(--oz-color-success);
  --warning: var(--oz-color-warning);
  --danger: var(--oz-color-danger);
  --shadow: var(--oz-shadow-card);
  --radius: var(--oz-radius-md);
  --safe-bottom: var(--oz-safe-bottom);
}

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

  --oz-color-background: #0f172a;
  --oz-color-surface: #111827;
  --oz-color-surface-subtle: #0b1220;
  --oz-color-surface-selected: rgba(1, 118, 211, 0.18);
  --oz-color-text: #dbeafe;
  --oz-color-text-body: #e5e7eb;
  --oz-color-text-weak: #94a3b8;
  --oz-color-border: #334155;
  --oz-color-border-soft: #1f2937;
  --oz-shadow-header: 0 2px 10px rgba(0, 0, 0, 0.24);
  --oz-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.22);
  --oz-shadow-dropdown: 0 18px 38px rgba(0, 0, 0, 0.35);
  --oz-shadow-modal: 0 28px 70px rgba(0, 0, 0, 0.42);
}