/* =============================================================================
   Design tokens — MARCA DE PELUKI (fuente única).
   La consumen TODAS las superficies (landing www, panel, reservar, docs, emails).
   Cambia la marca aquí, no en cada página.

   DOS CAPAS DE MARCA en Peluki:
   - CORPORATIVA (este fichero): la marca del producto Peluki. La usan `www` (landing)
     y `panel` (dueño). Aspecto claro, limpio y conciso; índigo + acento coral.
   - POR TENANT (runtime): las superficies de cara al cliente (`reservar` y la página
     pública del salón) SOBREESCRIBEN estas mismas variables por salón (logo/colores del
     tenant), partiendo de un PRESET según el tipo de salón (ver design-system.md).
     Como todo son variables CSS, tematizar un tenant = redefinir --color-*/--font-* en
     :root (o en un contenedor) en runtime. No se toca este contrato de claves.
   ============================================================================= */

:root {
  /* --- Marca -------------------------------------------------------------- */
  --brand-name: "Peluki";

  /* Color de marca — Peluki corporativo (claro y conciso) */
  --color-primary:        #4f46e5;   /* índigo: CTAs principales, enlaces */
  --color-primary-contrast:#ffffff;  /* texto sobre primary (AA: contraste ~6.3) */
  --color-secondary:      #1e293b;   /* slate oscuro: cabeceras, texto fuerte */
  --color-accent:         #fb7185;   /* coral: acentos, destacados, badges */

  /* Semánticos */
  --color-success: #1a8f5a;
  --color-warning: #b7791f;
  --color-danger:  #c0362c;
  --color-info:    #4f46e5;

  /* Neutros / superficies (tema claro, aireado) */
  --color-bg:        #ffffff;
  --color-surface:   #f7f8fb;   /* superficie muy clara con leve frío */
  --color-border:    #e5e7ef;
  --color-text:      #1a1d24;   /* contraste AA sobre bg */
  --color-text-muted:#586074;

  /* --- Tipografía --------------------------------------------------------- */
  /* Titulares en Poppins (webfont, ver nota de carga en design-system.md);
     texto en fuentes del sistema (cero peso). Si Poppins no carga, cae al stack. */
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --font-size-base: 16px;
  --scale-sm:  0.875rem;
  --scale-md:  1rem;
  --scale-lg:  1.25rem;
  --scale-xl:  1.75rem;
  --scale-2xl: 2.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold:   700;
  --line-height: 1.55;

  /* --- Espaciado (escala de 4px) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Formas ------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10);

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1080px;
  --transition: 160ms ease;
}

/* Tema oscuro: preferencia del sistema y [data-theme] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:        #0f1216;
    --color-surface:   #171b21;
    --color-border:    #2a2f37;
    --color-text:      #e7e9ee;
    --color-text-muted:#9aa2b1;
  }
}
:root[data-theme="dark"] {
  --color-bg:        #0f1216;
  --color-surface:   #171b21;
  --color-border:    #2a2f37;
  --color-text:      #e7e9ee;
  --color-text-muted:#9aa2b1;
}