/* ======================================================================
   RADAR — Design tokens
   Fuente única de verdad de tipografía, color, espaciado y elevación.
   La cargan app.html, admin.html, organizer.html e index.html ANTES de
   styles.css / landing.css, así que cualquier variable de acá se puede
   pisar más abajo si una pantalla lo necesita.

   Reglas de color que vienen del manual de marca y de los PDFs de mayo 2026:
     - La identidad es blanco, negro y escala de grises.
     - El color saturado se reserva para CATEGORÍAS de eventos.
     - El violeta es exclusivo de "Artes"; el rosa, de "Cine".
       No usarlos para UI general (botones, links, estados).
   ====================================================================== */

/* ---- Tipografía de marca ----
   Syncopate es la display de RADAR. Va en títulos y en piezas cortas de
   identidad; NUNCA en texto corrido, descripciones, chats ni formularios:
   su interletrado ancho destruye la legibilidad en párrafos.
   Antes sólo la cargaba la landing — backlog 2.1 pedía extenderla a la app. */
@font-face {
  font-family: 'Syncopate';
  src: url('/assets/fonts/Syncopate-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syncopate';
  src: url('/assets/fonts/Syncopate-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Familias ---- */
  --font-display: 'Syncopate', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Neutrales ----
     Grises verdaderos, sin dominante azul-violeta. Los valores anteriores
     de la app (#1a1a2e, #5a5a7a, #8a8aa0, #d8d8e8) tenían tinte violeta y
     eran justamente lo que el PDF de mayo pedía pasar a gris o negro. */
  --ink: #0e0e14;          /* texto principal        — 18.6:1 sobre blanco */
  --ink-soft: #34343f;     /* texto enfatizado       — 11.4:1 */
  --muted: #6b6b7b;        /* texto secundario       —  5.4:1  (AA) */
  --muted-2: #74747f;      /* metadatos, timestamps  —  4.8:1  (AA) */
  --line: #ececf2;         /* separadores suaves */
  --line-strong: #dcdce6;  /* bordes de control */

  --bg: #ffffff;
  --bg-soft: #f7f7f8;      /* fondo de app */
  --bg-tint: #f1f1f3;      /* superficies elevadas, inputs */
  --bg-hover: #f2f2f4;

  /* ---- Marca ----
     El coral sólo se usa en la landing y en acentos de marketing.
     Dentro de la app los CTAs son negro pleno. */
  --brand-1: #ff9bb3;
  --brand-2: #f0683f;
  --brand-3: #e8581c;
  --brand-grad: linear-gradient(135deg, #ff9bb3 0%, #f0683f 55%, #e8581c 100%);
  --brand-ink: #e8581c;

  /* ---- Estado ----
     Rojo y verde de sistema. Son señales funcionales, no decoración: no se
     usan para categorizar ni para jerarquizar botones. */
  --state-danger: #e5484d;
  --state-success: #009640;
  --state-warning: #e9b306;

  /* ---- Categorías (paleta oficial PDF mayo 2026) ----
     Mismos valores que usan `.cat-*` en styles.css y `--c-*` en landing.css.
     Acá quedan como variables para que el código nuevo no vuelva a
     hardcodear hexadecimales sueltos. */
  --cat-recital: #06b6d4;
  --cat-fiesta: #3a82f6;
  --cat-cultura: #a855f7;      /* Artes */
  --cat-evento: #ec4899;       /* Cine */
  --cat-turismo: #ef4443;
  --cat-gastronomia: #f97315;
  --cat-infantil: #e9b306;
  --cat-deporte: #7fbb3f;
  --cat-expo: #009640;
  --cat-neutral: #8a8a96;      /* fallback: categoría desconocida */

  /* ---- Escala tipográfica ---- */
  --fs-3xl: 1.75rem;   /* 28 — títulos de pantalla */
  --fs-2xl: 1.375rem;  /* 22 — títulos de sección */
  --fs-xl: 1.125rem;   /* 18 — títulos de card */
  --fs-lg: 1rem;       /* 16 — cuerpo base */
  --fs-md: 0.9375rem;  /* 15 — cuerpo denso */
  --fs-sm: 0.8125rem;  /* 13 — metadatos */
  --fs-xs: 0.6875rem;  /* 11 — etiquetas, badges */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* ---- Espaciado (paso de 4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- Radios ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* ---- Elevación ----
     Sombras neutras y suaves; nada de halos de color. */
  --sh-sm: 0 1px 2px rgba(14, 14, 20, 0.06);
  --sh-md: 0 4px 20px rgba(14, 14, 20, 0.08);
  --sh-lg: 0 8px 40px rgba(14, 14, 20, 0.12);

  /* ---- Layout ---- */
  --h-header: 60px;
  --h-filters: 50px;
  --h-bottom-nav: 62px;
  --w-sidebar: 240px;         /* barra lateral de escritorio, expandida */
  --w-sidebar-collapsed: 76px; /* entre 1024 y 1280px */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ---- Objetivo táctil ----
     44px es el mínimo de las guías de Apple y Material para que un dedo
     acierte sin pelear. Todo control interactivo lo respeta. */
  --tap: 44px;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t-base: 0.25s var(--ease);
}

/* Quien pide menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
  }
}

/* ---- Utilidad de tipografía de marca ----
   Aplicar a títulos. `font-synthesis: none` evita que el navegador finja
   una bold falsa cuando el peso pedido no existe en el archivo. */
.font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-synthesis: none;
}