/*
 * tokens.css — Sistema de tokens base para FLETZO Web
 * Las variables de color/spacing son inyectadas por tokens.js en runtime.
 * Este archivo define los tokens de layout y tipografía que no cambian por config.
 */

/* ── Reset mínimo ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video        { display: block; max-width: 100%; }
a                      { color: inherit; text-decoration: none; }
button                 { border: none; background: none; cursor: pointer; font: inherit; }

/* ── Tokens de layout (fijos, no cambian por config) ─────────────────── */
:root {
  /* Contenedor máximo */
  --fw-max-width:      1200px;

  /* Grid del hero: foto y contenido */
  --fw-photo-width-mobile:  100%;
  --fw-photo-height-mobile: 48vh;
  --fw-photo-width-desktop: 56%;

  /* Tipografía — stack sistema, cero dependencias externas */
  --fw-font-display: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fw-font-body:    system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Escala tipográfica base (mobile) */
  --fw-text-xs:   11px;
  --fw-text-sm:   13px;
  --fw-text-base: 15px;
  --fw-text-lg:   18px;
  --fw-text-xl:   22px;
  --fw-text-2xl:  28px;
  --fw-text-3xl:  36px;
  --fw-text-4xl:  48px;
  --fw-text-5xl:  64px;

  /* Espaciado base (multiplicado por --fw-density en runtime) */
  --fw-space-xs:  4px;
  --fw-space-sm:  8px;
  --fw-space-md:  16px;
  --fw-space-lg:  24px;
  --fw-space-xl:  40px;
  --fw-space-2xl: 64px;

  /* Border radius */
  --fw-radius-sm:   8px;
  --fw-radius-md:   14px;
  --fw-radius-lg:   20px;
  --fw-radius-full: 999px;

  /* Sombras */
  --fw-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --fw-shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);

  /* Tipografía — display usa serif del sistema para el nombre del negocio en el hero */
  --fw-font-display: Georgia, 'Times New Roman', serif;

  /* Tokens de estado — NUNCA cambian con el tema (son señales cognitivas universales) */
  --fw-available: #1A7A3F;   /* verde de "abierto / disponible" */
  --fw-wa:        #25D366;   /* verde de WhatsApp — siempre este valor */

  /* Tokens de color — los valores los inyecta tokens.js en runtime */
  /* Fallbacks para que el CSS funcione si el JS aún no corrió */
  --fw-bg:           #FFFBF5;
  --fw-text:         #1A0E00;
  --fw-text-muted:   rgba(26,14,0,0.50);
  --fw-surface:      rgba(26,14,0,0.04);
  --fw-border:       rgba(26,14,0,0.10);
  --fw-nav-bg:       rgba(255,251,245,0.92);
  --fw-gradient-end: #FFFBF5;
  --fw-accent:       #C75C00;
  --fw-density:      1;
  --fw-transition:   220ms;
  --fw-transition-slow: 420ms;
}

/* ── Accesibilidad: foco visible ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--fw-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Motion reducido ─────────────────────────────────────────────────── */
/* tokens.js ya aplica --fw-transition:0ms cuando detecta prefers-reduced-motion */
/* Esta regla es el fallback por si el JS no corrió */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}