:root {
  --ui-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;

  --ui-radius-xs: 6px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-button-radius: 3px;

  --ui-border-color: rgba(24, 44, 68, 0.12);
  --ui-border-strong: rgba(24, 44, 68, 0.18);
  --ui-surface-muted: #f6f8fb;
  --ui-surface-elevated: #ffffff;
  --ui-surface-accent: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));

  --ui-text-1: var(--text-primary, #182c44);
  --ui-text-2: var(--text-secondary, #4a5568);
  --ui-text-3: var(--text-light, #718096);

  --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ui-shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);
  --ui-shadow-md: 0 14px 30px rgba(15, 23, 42, 0.08);
  --ui-shadow-lg: 0 22px 44px rgba(15, 23, 42, 0.12);

  --ui-transition-fast: 140ms ease;
  --ui-transition-base: 180ms ease;
  --ui-focus-ring: 0 0 0 3px rgba(68, 132, 176, 0.16);
}

body.dark-mode {
  --ui-border-color: rgba(203, 213, 224, 0.12);
  --ui-border-strong: rgba(203, 213, 224, 0.18);
  --ui-surface-muted: rgba(15, 26, 42, 0.92);
  --ui-surface-elevated: rgba(24, 44, 68, 0.96);
  --ui-surface-accent: linear-gradient(180deg, rgba(15, 26, 42, 0.98), rgba(24, 44, 68, 0.98));
  --ui-text-1: var(--text-dark-primary, #f7fafc);
  --ui-text-2: var(--text-dark-secondary, #cbd5e0);
  --ui-text-3: #94a3b8;
}