:root {
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ui-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-focus-ring: 0 0 0 3px rgba(13, 110, 253, 0.35);
}

[data-theme="dark"] {
  --ui-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ui-focus-ring: 0 0 0 3px rgba(99, 179, 237, 0.35);
}

/* Helpers seguros e opcionais para uso gradual */
.ui-card {
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-sm);
}

.ui-section {
  padding: var(--ui-space-4);
}

@media (min-width: 768px) {
  .ui-section {
    padding: var(--ui-space-6);
  }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}