/*
 * AFADIR SPA — Design System (tokens + primitives)
 *
 * This file is loaded BEFORE afadir-app.css.
 * It must stay small and safe: variables + a few primitives.
 *
 * Responsive contract (single source of truth):
 * - xs: 0–479
 * - sm: 480–767
 * - md: 768–1023
 * - lg: 1024–1279
 * - xl: 1280+
 */

:root {
  /* Colors */
  --af-color-bg: #ffffff;
  --af-color-surface: #ffffff;
  --af-color-text: #111827;
  --af-color-muted: #6b7280;
  --af-color-border: #e5e7eb;

  /* Brand */
  --af-color-primary: #ec4899;
  --af-color-primary-600: #db2777;
  --af-color-primary-700: #be185d;
  --af-color-focus: #2563eb;

  /* Typography */
  --af-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --af-font-size-12: 12px;
  --af-font-size-14: 14px;
  --af-font-size-16: 16px;
  --af-font-size-18: 18px;
  --af-font-size-24: 24px;
  --af-line-height: 1.45;

  /* Spacing */
  --af-space-0: 0;
  --af-space-1: 4px;
  --af-space-2: 8px;
  --af-space-3: 12px;
  --af-space-4: 16px;
  --af-space-5: 20px;
  --af-space-6: 24px;
  --af-space-8: 32px;
  --af-space-10: 40px;
  --af-space-12: 48px;

  /* Radii & shadows */
  --af-radius-8: 8px;
  --af-radius-12: 12px;
  --af-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.08);
  --af-shadow-md: 0 6px 18px rgba(17, 24, 39, 0.12);

  /* Z-index scale (UNIFIED with theme) */
  --af-z-base: 1;
  --af-z-sticky: 100;
  --af-z-dropdown: 1000;
  --af-z-overlay: 2000;
  --af-z-modal: 3000;
  --af-z-toast: 4000;
  --af-z-max: 9999;

  /* Layout */
  --af-container-max: 1120px;
  --af-gutter: 12px;
}

/*
 * Dark mode overrides
 * Estas variables se aplican automáticamente cuando el dispositivo del usuario
 * está configurado en modo oscuro mediante la media query prefers-color-scheme.
 * Los componentes deben utilizar los tokens definidos arriba para que la
 * personalización funcione correctamente. Este bloque no toca estilos
 * directamente; sólo redefine tokens de color en modo oscuro.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --af-color-bg: #111827;
    --af-color-surface: #1f2937;
    --af-color-text: #f3f4f6;
    --af-color-muted: #d1d5db;
    --af-color-border: #4b5563;
    /* Mantener los colores de marca, pero podrían ajustarse si se desea */
    --af-color-primary: #ec4899;
    --af-color-primary-600: #db2777;
    --af-color-primary-700: #be185d;
    --af-color-focus: #3b82f6;
  }
}

/* Primitives */

.af-font-sans { font-family: var(--af-font-sans); }

.af-container {
  width: 100%;
  max-width: var(--af-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--af-gutter);
  padding-right: var(--af-gutter);
}

.af-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.af-focus-ring:focus-visible {
  outline: 2px solid var(--af-color-focus);
  outline-offset: 2px;
}