/* ==========================================================================
   Design tokens — valores base compartidos por todas las páginas del admin.
   No poner estilos de componentes acá, solo variables.
   ========================================================================== */

:root {
  /* Color — marca */
  --color-primary: #54033d;
  --color-primary-hover: #6b0a4f;
  --color-primary-active: #400230;

  /* Color — neutros */
  --color-bg: #faf8f9;
  --color-surface: #ffffff;
  --color-border: #e4dde1;
  --color-text: #1f1219;
  --color-text-muted: #7a6b73;
  --color-placeholder: #a99aa1;

  /* Color — estado */
  --color-error: #b3261e;

  /* Color — foco (derivado de --color-primary, uso en box-shadow de :focus-visible) */
  --color-focus-ring: rgba(84, 3, 61, 0.15);
  --color-focus-ring-strong: rgba(84, 3, 61, 0.3);

  /* Tipografía */
  --font-base: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.375rem;    /* 22px */
  --font-size-xl: 1.75rem;     /* 28px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Espaciado (escala de 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Bordes y radios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --border-width: 1px;

  /* Layout */
  --card-max-width: 360px;     /* ancho de contenido en pantallas de auth (login) */
  --content-max-width: 1120px; /* ancho de contenido en páginas del admin (listados, tablas). Los formularios ahora viven en el side sheet, que tiene su propio ancho fijo (ver .sheet) */
  --sidebar-width: 220px;
}