/* ============================================================
   main.css — reset/base + design tokens compartidos
   ------------------------------------------------------------
   Sprint U (WI-4): baseline visual. Los tokens viven acá y se
   consumen vía `var(--token)` desde `storefront.css` y
   `admin.css`, así las dos áreas comparten una sola fuente de
   verdad de color, espaciado, radios, sombras y tipografía.
   ============================================================ */

:root {
  /* — Marca — */
  --c-primary:          #2563eb;
  --c-primary-hover:    #1d4ed8;
  --c-primary-disabled: #93c5fd;
  --c-primary-soft:     #eff6ff;
  --c-primary-border:   #c7d2fe;

  /* — Neutrales (de tinta a superficie) — */
  --c-ink:              #111827;  /* títulos, fondos oscuros   */
  --c-ink-soft:         #1f2937;  /* texto base del body       */
  --c-text:             #374151;  /* texto general             */
  --c-text-muted:       #4b5563;  /* etiquetas                 */
  --c-text-subtle:      #6b7280;  /* texto secundario          */
  --c-text-faint:       #9ca3af;  /* texto terciario / hints   */
  --c-border-strong:    #d1d5db;  /* bordes de inputs          */
  --c-border:           #e5e7eb;  /* bordes de tarjetas/tablas */
  --c-surface-sunken:   #f3f4f6;  /* superficie hundida        */
  --c-bg:               #f9fafb;  /* fondo de página           */
  --c-surface:          #fff;     /* tarjetas, inputs          */

  /* — Semánticos (estado) — */
  --c-success:          #15803d;
  --c-success-fg:       #065f46;
  --c-success-bg:       #d1fae5;
  --c-success-soft:     #ecfdf5;
  --c-info-fg:          #1e40af;  /* pedido «en preparación» */
  --c-info-bg:          #dbeafe;
  --c-accent-fg:        #3730a3;  /* pedido «enviado»        */
  --c-accent-bg:        #e0e7ff;
  --c-danger:           #b91c1c;
  --c-danger-hover:     #991b1b;
  --c-danger-bg:        #fee2e2;
  --c-danger-border:    #fecaca;
  --c-danger-soft:      #fef2f2;
  --c-warning-fg:       #92400e;
  --c-warning-bg:       #fef3c7;
  --c-warning-border:   #fcd34d;

  /* — Escala de espaciado — */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* — Radios — */
  --r-sm:   .25rem;
  --r-md:   .375rem;
  --r-lg:   .5rem;
  --r-xl:   .75rem;
  --r-pill: 999px;

  /* — Sombras — */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);

  /* — Tipografía — */
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-base);
  color: var(--c-ink-soft);
  background: var(--c-bg);
  line-height: 1.5;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.is-disabled { opacity: .5; pointer-events: none; }

/* Foco visible y consistente en toda la app (accesibilidad +
   coherencia visual — WI-4/WI-6). Solo afecta el realce de foco. */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ============================================================
   Sprint U (WI-6) — páginas de error compartidas
   ------------------------------------------------------------
   `.error-page` la usa la página HTML del error handler global
   (404 / 403 / 429 / 500 / CSRF). `.app-error` es el fragmento
   que el error handler devuelve a las requests HTMX.
   ============================================================ */
.error-page {
  max-width: 34rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  text-align: center;
}
.error-page__code {
  margin: 0;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-primary);
}
.error-page h1 {
  margin: .25rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.error-page__lead {
  margin: .75rem 0 .35rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-ink);
}
.error-page__msg {
  margin: 0 0 1.75rem;
  color: var(--c-text-subtle);
}
.error-page__btn {
  display: inline-block;
  padding: .7rem 1.6rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border-radius: var(--r-lg);
  font-weight: 600;
}
.error-page__btn:hover {
  background: var(--c-primary-hover);
  text-decoration: none;
}

/* Fragmento de error para respuestas HTMX (sin layout). */
.app-error {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border);
  border-radius: var(--r-lg);
  color: var(--c-danger);
  font-weight: 600;
}