/*
 * GENERADO — no edites este archivo.
 * Fuente: tokens.css   ·   Regenerar: python3 tokens/generar-static.py
 *
 * Versión para sitios estáticos (HTML/CSS/JS sin build). Es tokens.css con
 * el bloque @theme traducido a :root, que es exactamente lo que Tailwind
 * haría al compilar. Impórtalo al inicio de tu hoja principal:
 *
 *     @import url("../docs/design/tokens/tokens.static.css");
 *
 * Ojo: un @import de CSS debe ir antes de cualquier regla del archivo. Si
 * queda después, el navegador lo ignora en silencio.
 */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/*
 * vectia — Design Tokens (fuente de verdad)
 *
 * Este archivo es para proyectos con Tailwind v4 (Next.js).
 *   app/globals.css:
 *     @import "tailwindcss";
 *     @import "../docs/design/tokens/tokens.css";
 *   → Tailwind genera las utilidades solo: bg-accent, text-2xl, rounded-md...
 *
 * Para sitios estáticos SIN build usa tokens.static.css, que se genera
 * desde este archivo con:
 *     python3 tokens/generar-static.py
 *
 *   ¿Por qué dos archivos? Porque @theme es una construcción de COMPILACIÓN:
 *   Tailwind la traduce a `:root` al construir. Un navegador sin build no
 *   conoce @theme, la descarta entera como at-rule desconocida, y te quedas
 *   sin un solo token — sin ningún error visible. El generador evita eso.
 *   Una sola fuente de verdad (este archivo), dos salidas.
 *
 * `static` fuerza a emitir TODOS los tokens, incluso los que Tailwind no ve
 * usados en una utilidad. Es necesario porque el CSS escrito a mano (los
 * helpers de abajo, y cualquier hoja del proyecto) consume tokens por var()
 * y Tailwind no lo detecta. Sin `static`, esos tokens desaparecen del build.
 *
 * Regla: si un valor aparece en el código y no está aquí, es un bug.
 * El porqué de cada valor vive en ../style-guide.md.
 */

:root {
  /* =====================================================================
   * COLOR
   * Solo los tokens base se usan directamente en componentes. Los tintes
   * numerados existen para hover / active / disabled / estados sutiles.
   * No inventes hex nuevos: extiende desde estos.
   * Los ratios de contraste verificados están en style-guide.md §2.
   * ===================================================================== */

  /* Acento — el único color "fuerte". Uno solo, o no hay ninguno. */
  --color-accent-50: #F0EBFC;    /* fondo tenue, badges */
  --color-accent-300: #A98CE8;   /* disabled, bordes suaves */
  --color-accent: #6034C9;       /* CTA, links, precios, estado activo */
  --color-accent-700: #4A26A0;   /* hover / pressed */
  --color-accent-ink: #FFFFFF;   /* texto SOBRE el acento */

  /* Acento secundario — dosis pequeñas: iconos, divisores, detalles.
   * Si no lo necesitas, bórralo. Dos acentos fuertes = ninguno. */
  --color-alt-300: #E0954F;
  --color-alt: #B0470E;
  --color-alt-700: #8A3708;

  /* Superficies */
  --color-bg: #FCFBFE;           /* fondo de página */
  --color-surface: #F4F1FA;      /* tarjetas, secciones alternas */
  --color-surface-alt: #E9E4F4;  /* segunda superficie (tags, inputs) */
  --color-dark: #17123A;         /* superficie oscura: nav, hero, footer */
  --color-dark-900: #0D0A22;     /* más oscura aún */

  /* Texto */
  --color-ink: #150F26;          /* cuerpo sobre superficies claras */
  --color-ink-muted: #574C6E;    /* secundario, captions */
  --color-ink-inverse: #F4F1FA;  /* cuerpo sobre superficies oscuras */

  /* Estructura y estado */
  --color-border: #DFD8EC;
  --color-border-strong: #C4B8DF;
  --color-success: #1F6B3A;
  --color-warning: #8A5A0B;
  --color-danger: #A3231B;

  /* Marca de terceros — NO son acento. La regla de «un solo color fuerte»
   * sigue en pie: el morado es el acento de vectia y estos verdes no compiten
   * con él porque no se usan para decidir nada. Solo visten las superficies de
   * WhatsApp, donde el verde no es una elección estética sino el hecho de que
   * la gente lo reconoce sin leer. Fuera de un enlace a WhatsApp, no aparecen.
   * Son los dos verdes oficiales de WhatsApp, sin retocar.
   * El texto ENCIMA va en --color-ink, no en blanco: blanco sobre #25D366 da
   * 1.98:1 y no pasa AA ni de lejos; con la tinta oscura sube a 9.2:1. */
  --color-whatsapp: #25D366;     /* fondo del botón */
  --color-whatsapp-700: #1EBE5A; /* hover / pressed */

  /* =====================================================================
   * TIPOGRAFÍA
   * Tres roles, tres familias. Un componente NUNCA nombra una fuente de
   * Google directamente: siempre pasa por estos tres tokens.
   * En Next.js la familia viene de next/font en app/layout.tsx y aquí se
   * referencia por su variable, p.ej. var(--font-fraunces).
   * En la ruta estática, tokens.static.css trae el @import de Google Fonts.
   * ===================================================================== */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Escala — razón ~1.25. Valores fijos: el escalado responsive se hace
   * con breakpoints (text-3xl md:text-4xl), no con clamp.
   * Para tipo fluido en sitios estáticos, ver ../COMO-USAR.md. */
  --text-xs: 0.75rem;      /* 12px — eyebrows, meta, labels en mayúsculas */
  --text-sm: 0.875rem;     /* 14px — captions, ayudas de formulario */
  --text-base: 1rem;       /* 16px — cuerpo */
  --text-md: 1.125rem;     /* 18px — párrafo de entrada */
  --text-lg: 1.375rem;     /* 22px — títulos de tarjeta */
  --text-xl: 1.75rem;      /* 28px — subtítulos de sección */
  --text-2xl: 2.25rem;     /* 36px — títulos de sección */
  --text-3xl: 2.875rem;    /* 46px — líneas secundarias de hero */
  --text-4xl: 3.75rem;     /* 60px — hero (tope móvil) */
  --text-5xl: 4.75rem;     /* 76px — hero (escritorio) */

  /* =====================================================================
   * ESPACIADO — base 4px
   * ===================================================================== */
  --spacing-xs: 0.25rem;   /* 4px  — icono↔label */
  --spacing-sm: 0.5rem;    /* 8px  — pilas apretadas, padding de badge */
  --spacing-md: 1rem;      /* 16px — gap por defecto, padding de tarjeta */
  --spacing-lg: 1.5rem;    /* 24px — padding cómodo, gap de formulario */
  --spacing-xl: 2.5rem;    /* 40px — espaciado interno de sección */
  --spacing-2xl: 4rem;     /* 64px — entre secciones (móvil) */
  --spacing-3xl: 6rem;     /* 96px — entre secciones (escritorio) */

  /* =====================================================================
   * LAYOUT
   * ===================================================================== */
  --container-page: 72rem;    /* 1152px — ancho máximo de contenido */
  --container-prose: 42rem;   /* 672px  — ancho máximo de texto corrido */

  /* =====================================================================
   * RADIOS
   * ===================================================================== */
  --radius-sm: 0.25rem;    /* tags, inputs */
  --radius-md: 0.5rem;     /* botones */
  --radius-lg: 1rem;       /* tarjetas, imágenes */
  --radius-pill: 999px;    /* pills, avatares, medidores */

  /* =====================================================================
   * ELEVACIÓN — dos pasos: en reposo y levantado. Nada más.
   * Sin glows, sin sombras de color.
   * ===================================================================== */
  --shadow-card: 0 12px 32px -16px rgb(21 15 38 / 0.35);
  --shadow-lift: 0 24px 48px -20px rgb(21 15 38 / 0.45);

  /* =====================================================================
   * MOTION — una curva, tres duraciones.
   *
   * ⚠️ `--ease-*` SÍ es un namespace de Tailwind (te da `ease-brand`).
   *    `--duration-*` NO lo es: no existe la utilidad `duration-base`.
   *    En Tailwind escribe `duration-[var(--duration-base)]`.
   *    En CSS a mano, `var(--duration-base)` funciona igual que siempre.
   * ===================================================================== */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);        /* p.ej. cubic-bezier(0.22, 1, 0.36, 1) */
  --duration-fast: 150ms;           /* color y sombra en hover/focus */
  --duration-base: 240ms;           /* subrayados, levantado de tarjeta */
  --duration-slow: 420ms;           /* entrada del hero, reveals */

  /* =====================================================================
   * RECURSO PROPIO (La Flecha)
   * El elemento gráfico que es solo tuyo. Su lista cerrada de usos
   * permitidos está en style-guide.md §7. Fuera de esa lista, no aparece.
   * ===================================================================== */
  --gradient-brand: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-alt) 50%,
    var(--color-dark) 100%
  );
}

/* =======================================================================
 * Helpers del recurso propio.
 * CSS plano (no @utility) para que funcionen igual con o sin Tailwind.
 * ======================================================================= */

.brand-line {
  height: 3px;
  width: 100%;
  background-image: var(--gradient-brand);
  border-radius: var(--radius-pill);
}

.brand-underline {
  background-image: var(--gradient-brand);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--duration-base) var(--ease-brand);
  padding-bottom: var(--spacing-xs);
}

.brand-underline:hover,
.brand-underline:focus-visible,
.brand-underline[aria-current="page"] {
  background-size: 100% 2px;
}

/* =======================================================================
 * Accesibilidad — no opcional.
 * ======================================================================= */

/* Anillo de foco visible en TODO elemento interactivo, claro y oscuro. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-underline {
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}