/* ==========================================================================
   TRUE X · Design Tokens v1.0
   Fuente: "True X — Brand & Design System" (style guide vivo)
   Uso: pegar en el proyecto Next (app/globals.css o styles/tokens.css).
   Regla madre: ningún valor fuera de esta escala. Si algo no está acá, no existe.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------
     COLOR · 8 neutros de estructura y texto
     La columna vertebral: canvas, superficie, hover y texto salen de acá.
     ------------------------------------------------------------------ */
  --tx-ink-950:#0A0A0A;   /* canvas            */
  --tx-ink-900:#141414;   /* surface            */
  --tx-ink-800:#242424;   /* hover              */
  --tx-ink-700:#3A3A3A;   /* divisor            */
  --tx-ink-600:#5C5C5C;   /* borde interno      */
  --tx-ink-400:#9A9A9A;   /* texto 2°           */
  --tx-ink-200:#C9C9C9;   /* texto 1.5          */
  --tx-ink-050:#EDEDED;   /* texto 1°           */

  /* COLOR · marca — dos valores, sin excepciones */
  --tx-accent:#D4FF3D;          /* acento único · contraste 17.0:1 sobre canvas */
  --tx-success:#3DE87A;         /* éxito · 12.2:1 sobre canvas */
  --tx-gradient-mid:#9FF24C;    /* parada media del gradiente (50%) */
  --tx-gradient:linear-gradient(135deg,#D4FF3D 0%,#9FF24C 50%,#3DE87A 100%); /* exclusivo PRIVÉ */

  /* COLOR · sistema — sólo interfaz, nunca comunicación */
  --tx-danger:#FF4D4D;          /* 6.0:1 sobre canvas · AA */
  --tx-warning:#FFB020;         /* mensajes de estado, jamás en campaña */

  /* COLOR · semánticos (usar estos en el código, no los crudos) */
  --tx-canvas:var(--tx-ink-950);
  --tx-surface:var(--tx-ink-900);
  --tx-surface-hover:var(--tx-ink-800);
  --tx-divider:var(--tx-ink-700);
  --tx-border:var(--tx-ink-600);
  --tx-text-primary:var(--tx-ink-050);
  --tx-text-secondary:var(--tx-ink-200);
  --tx-text-tertiary:var(--tx-ink-400);
  --tx-on-accent:var(--tx-ink-950);   /* regla dura: relleno lima o verde → texto negro */

  /* COLOR · estados del acento — brightness, no hexes nuevos */
  --tx-accent-hover:brightness(1.08);
  --tx-accent-press:brightness(0.9);

  /* COLOR · proporción operable: canvas 60% · texto 25% · acento 10% (y resto neutro).
     En cualquier pantalla el lima no supera un elemento sólido por vista
     más sus micro-acentos (borde de foco, badge). */

  /* ------------------------------------------------------------------
     TIPOGRAFÍA · dos familias y nada más
     Rol de dato = Saira en CAPS con tracking, no una tercera familia.
     ------------------------------------------------------------------ */
  --tx-font-display:"Horizon","Saira",system-ui,sans-serif;  /* fallback Saira 900, NO Impact */
  --tx-font-ui:"Saira",system-ui,-apple-system,sans-serif;
  --tx-font-data:var(--tx-font-ui);

  /* escala · razón 1.25 */
  --tx-fs-12:12px; --tx-fs-14:14px; --tx-fs-16:16px; --tx-fs-18:18px; --tx-fs-22:22px;
  --tx-fs-28:28px; --tx-fs-36:36px; --tx-fs-46:46px; --tx-fs-60:60px; --tx-fs-76:76px;

  /* roles tipográficos */
  --tx-display-size:clamp(60px,7vw,76px);   /* display hero 60/76 */
  --tx-display-lh:0.95;                     /* sólo titulares de UNA línea sin acentos */
  --tx-display-lh-tildes:1.25;              /* multi línea en español: mínimo 1.2 */
  --tx-display-tracking:-0.01em;
  --tx-display-weight:900;

  --tx-title-size:36px;                     /* piso de uso de la display */
  --tx-title-lh:1.15;

  --tx-eyebrow-size:12px;                   /* Saira 500 · CAPS */
  --tx-eyebrow-tracking:0.16em;
  --tx-eyebrow-weight:500;

  --tx-lead-size:18px;
  --tx-lead-lh:1.65;
  --tx-body-size:16px;                      /* mínimo absoluto de cuerpo */
  --tx-body-lh:1.65;

  --tx-data-size:14px;                      /* Saira 500 · CAPS · tabular */
  --tx-data-tracking:0.10em;
  --tx-data-weight:500;

  --tx-price-size:28px;                     /* Saira 600 · tabular */
  --tx-price-weight:600;

  --tx-weight-regular:400; --tx-weight-medium:500; --tx-weight-bold:700; --tx-weight-black:900;

  /* Holgura ES: todo contenedor lleva +20% sobre el inglés.
     Los botones no llevan ancho fijo, llevan padding. */

  /* ------------------------------------------------------------------
     ESPACIO · base 4 (no 8: con área táctil de 44px y datos densos,
     el paso de 8 obliga a inventar medios valores)
     ------------------------------------------------------------------ */
  --tx-space-1:4px;  --tx-space-2:8px;  --tx-space-3:12px; --tx-space-4:16px;
  --tx-space-6:24px; --tx-space-8:32px; --tx-space-12:48px; --tx-space-16:64px;
  --tx-space-24:96px; --tx-space-32:128px;

  /* RADIOS · el radio crece con el contenedor, nunca por gusto.
     Prohibido: 6, 10, 14px. */
  --tx-radius-tag:4px;      /* tag, ícono */
  --tx-radius-control:8px;  /* input, botón */
  --tx-radius-card:12px;    /* card */
  --tx-radius-overlay:20px; /* modal, hero */
  --tx-radius-pill:999px;   /* chip, filtro */

  /* ELEVACIÓN · en dark manda la superficie, no la sombra */
  --tx-elev-1-bg:var(--tx-ink-900);   --tx-elev-1-border:var(--tx-ink-700); --tx-elev-1-shadow:none;
  --tx-elev-2-bg:var(--tx-ink-800);   --tx-elev-2-border:var(--tx-ink-700);
  --tx-elev-2-shadow:0 8px 24px -8px rgba(0,0,0,0.70);
  --tx-elev-3-bg:var(--tx-ink-800);   --tx-elev-3-border:var(--tx-ink-600);
  --tx-elev-3-shadow:0 24px 60px -16px rgba(0,0,0,0.85);
  --tx-glow:0 0 0 3px rgba(212,255,61,0.25);        /* foco visible · el único glow */
  --tx-glow-warning:0 0 0 4px rgba(255,176,32,0.20);

  /* ------------------------------------------------------------------
     GRILLA Y BREAKPOINTS · mobile-first de verdad
     ------------------------------------------------------------------ */
  --tx-container:1240px;      /* XL 1440: contenedor fijo */
  --tx-gutter-sm:16px; --tx-gutter-md:24px; --tx-gutter-lg:32px;
  --tx-bp-sm:480px;  /* 4 col  · 1 card por fila */
  --tx-bp-md:768px;  /* 8 col  · 2 cards */
  --tx-bp-lg:1024px; /* 12 col · 3 cards */
  --tx-bp-xl:1440px; /* 4 cards */
  --tx-touch:44px;    /* área táctil mínima, sin excepción */
  --tx-control-sm:36px; --tx-control-md:44px; --tx-control-lg:52px;

  /* ------------------------------------------------------------------
     MOVIMIENTO · “flowy” en cuatro reglas ejecutables
     1) nada aparece de golpe: entra desplazado 12px desacelerando
     2) las salidas son más rápidas que las entradas
     3) las listas entran en cascada de 60ms, nunca en bloque
     4) una sola curva domina el sistema — sin bounce
     ------------------------------------------------------------------ */
  --tx-dur-instant:90ms;   /* color, opacidad */
  --tx-dur-fast:160ms;     /* hover, foco */
  --tx-dur-base:260ms;     /* todo lo demás */
  --tx-dur-slow:420ms;     /* modal, drawer */
  --tx-dur-reveal:640ms;   /* entrada de sección */

  --tx-ease-flow:cubic-bezier(0.22,1,0.36,1);   /* default */
  --tx-ease-enter:cubic-bezier(0.16,1,0.30,1);
  --tx-ease-exit:cubic-bezier(0.40,0,1,1);
  --tx-ease-inout:cubic-bezier(0.65,0,0.35,1);  /* loops */

  --tx-shift:12px;          /* desplazamiento de entrada */
  --tx-stagger:60ms;        /* cascada de listas */
  --tx-hover-scale:1.02;    /* máximo */
  --tx-marquee-duration:18s; /* máximo por ciclo: más rápido se lee como banner de oferta */

  /* ------------------------------------------------------------------ */
  --tx-z-header:100; --tx-z-overlay:200; --tx-z-modal:300; --tx-z-toast:400;
}

/* ==========================================================================
   UTILIDADES · los roles tipográficos y las reglas del sistema
   ========================================================================== */

.tx-display{
  font-family:var(--tx-font-display); font-weight:var(--tx-display-weight);
  font-size:var(--tx-display-size); line-height:var(--tx-display-lh-tildes);
  letter-spacing:var(--tx-display-tracking); text-transform:uppercase;
}
/* horizon no trae tildes con espacio vertical: si el titular es de una sola
   línea y no lleva acentos, se puede comprimir a 0.95 */
.tx-display--tight{ line-height:var(--tx-display-lh); }

.tx-title{
  font-family:var(--tx-font-display); font-weight:var(--tx-display-weight);
  font-size:var(--tx-title-size); line-height:var(--tx-title-lh);
  letter-spacing:var(--tx-display-tracking); text-transform:uppercase;
}
/* separadores, guiones y símbolos dentro de un título van SIEMPRE en Saira:
   Horizon no tiene el glifo · y sale como espacio en blanco */
.tx-display .tx-sep, .tx-title .tx-sep{
  font-family:var(--tx-font-ui); font-weight:400; letter-spacing:0; text-transform:none;
}
.tx-eyebrow{
  font-family:var(--tx-font-ui); font-weight:var(--tx-eyebrow-weight);
  font-size:var(--tx-eyebrow-size); letter-spacing:var(--tx-eyebrow-tracking); text-transform:uppercase;
}
.tx-lead{ font-family:var(--tx-font-ui); font-size:var(--tx-lead-size); line-height:var(--tx-lead-lh); }
.tx-body{ font-family:var(--tx-font-ui); font-size:var(--tx-body-size); line-height:var(--tx-body-lh); }
.tx-data{
  font-family:var(--tx-font-data); font-weight:var(--tx-data-weight); font-size:var(--tx-data-size);
  letter-spacing:var(--tx-data-tracking); text-transform:uppercase; font-variant-numeric:tabular-nums;
}
.tx-price{
  font-family:var(--tx-font-ui); font-weight:var(--tx-price-weight); font-size:var(--tx-price-size);
  font-variant-numeric:tabular-nums;
}

/* foco visible en todo control, siempre */
.tx-focusable:focus-visible{ outline:none; box-shadow:var(--tx-glow); }

/* área táctil mínima */
.tx-touch{ min-height:var(--tx-touch); }

/* entrada estándar: 12px de desplazamiento + curva enter */
@keyframes txFlowIn{ from{ opacity:0; transform:translateY(var(--tx-shift)); } to{ opacity:1; transform:none; } }
.tx-reveal{ animation:txFlowIn var(--tx-dur-reveal) var(--tx-ease-enter) both; }
.tx-reveal--2{ animation-delay:var(--tx-stagger); }
.tx-reveal--3{ animation-delay:calc(var(--tx-stagger) * 2); }
.tx-reveal--4{ animation-delay:calc(var(--tx-stagger) * 3); }

@media (prefers-reduced-motion:reduce){
  :root{
    --tx-dur-instant:1ms; --tx-dur-fast:1ms; --tx-dur-base:1ms;
    --tx-dur-slow:1ms; --tx-dur-reveal:1ms; --tx-shift:0px;
  }
  *,*::before,*::after{ animation-duration:1ms!important; animation-iteration-count:1!important; }
  .tx-reveal{ animation:none; opacity:1; transform:none; }
}

/* ==========================================================================
   PROHIBIDO (documentado, para que no se repita)
   · texto blanco sobre lima (1.03:1) o verde (1.47:1)  → sobre acento, texto negro
   · dos botones primarios en la misma vista              → ninguno es primario
   · el gradiente fuera de PRIVÉ
   · lima con alpha sobre negro (da verde militar)        → acento en borde y texto
   · grafito como texto (1.73:1)                          → es divisor, no texto
   · radios 6/10/14px y espaciados fuera de la escala base 4
   · una tercera tipografía “porque queda bien”
   · botón de 32px de alto en mobile                      → mínimo táctil 44px
   ========================================================================== */