/* ===================================================================
   Trading Fácil y Sencillo — Tokens
   -------------------------------------------------------------------
   Único archivo con valores de marca. Los nombres de variable vienen
   del design system del cliente (assets/brand/styles.css); aquí se
   respetan y se extienden. Para recolorar el sitio, editar solo esto.
   =================================================================== */

/* ---- Tipografías ------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ---- Color de marca (del design system del cliente) ------------ */
  --color-primary: #ff9850;
  --color-primary-active: #e88533;
  --color-primary-hover: #ffa06e;
  --color-premium: #f39c12;

  /* El naranja de los acentos: un punto más saturado que el primario.
     No es un descuido —se usa en veinticuatro sitios y siempre para lo
     mismo: resplandores, filetes, trazos de los gráficos y bordes que
     se encienden—. El primario se reserva para texto y rellenos, donde
     manda la legibilidad.

     La terna en crudo es para las capas con transparencia: `rgba()` no
     acepta un hex dentro, así que sin ella habría que repetir el color
     a mano en cada resplandor, que es justo lo que se quería quitar. */
  --color-primary-acento: #ff8a3d;
  --color-primary-acento-rgb: 255, 138, 61;

  /* El azul del plan Anual. Es el único sitio del sitio donde entra un
     color frío, y por eso está aquí y no suelto en una regla: separa el
     plan largo de los otros dos sin sacarlo de la paleta.

     Elegido por contraste, no a ojo: da 7.70:1 sobre el fondo, casi lo
     mismo que el naranja primario (8.17:1), así que los dos planes se
     leen con la misma fuerza y ninguno parece el apagado. */
  --color-anual: #6bb6ff;
  --color-anual-rgb: 107, 182, 255;

  --color-dark: #1a1a1a;
  --color-secondary: #2d2d2d;
  --color-neutral-100: #f5f5f5;
  --color-light: #ffffff;

  --color-success: #2ecc71;
  --color-alert: #e74c3c;

  --color-primary-tint: #fff1e4;
  --color-premium-tint: #fef4e2;

  /* ---- Superficies ---------------------------------------------- */
  --color-surface-bg: #1a1a1a;
  --color-surface-card: #232323;
  --color-surface-elevated: #2a2a2a;
  --color-surface-panel: #2d2d2d;
  --color-surface-inverse: #ffffff;

  /* Fondo más profundo que el base, para el hero y el cierre.
     Da al naranja algo más oscuro contra lo que brillar. */
  --color-surface-deep: #121212;

  /* ---- Bordes ---------------------------------------------------- */
  /* #333333 es el borde del encargo. Se deja en blanco con alfa y no
     en hexadecimal fijo porque las secciones alternan dos fondos
     —#1a1a1a y #121212— y un #333 clavado se ve el doble de marcado
     sobre el oscuro. Con alfa 0.12 el filete cae en #333 sobre el
     fondo principal y se adapta solo en el otro. */
  --color-border-subtle: rgba(255, 255, 255, 0.12);
  --color-border-default: rgba(255, 255, 255, 0.2);
  --color-border-strong: rgba(255, 255, 255, 0.32);

  /* ---- Texto ------------------------------------------------------
     Los cuatro niveles del encargo, en hexadecimal fijo en vez de
     blanco con alfa: así el color no depende de la superficie que haya
     detrás y es el mismo en las dos secciones oscuras del sitio.

       #ffffff  primario   17.4:1 sobre #1a1a1a
       #cccccc  secundario 10.9:1
       #999999  terciario   6.1:1
       #666666  mínimo      3.0:1  <- NO CUMPLE AA

     El cuarto nivel del encargo se declara para tenerlo a mano, pero
     no se usa en ningún texto: 3.0:1 se queda por debajo del 4.5 que
     exige AA para cuerpo pequeño, y este sitio se ha medido en AA
     desde el principio. Donde el encargo pedía #666 va #999. */
  --color-text: #ffffff;
  --color-text-muted: #cccccc;
  --color-text-faint: #999999;
  --color-text-min: #666666;  /* solo bordes y separadores, nunca texto */

  /* Los dos grises opacos del sistema. Los bordes de arriba son blancos
     con transparencia y se mezclan con lo que tengan detrás; estos dos
     son sólidos, para piezas que se apoyan sobre fondos distintos y
     tienen que verse siempre igual: los puntos del carrusel, los discos
     del carril y los filetes de tarjeta. Nunca llevan texto encima. */
  --color-gris-medio: #555555;
  --color-gris-hondo: #333333;

  /* Texto sobre el naranja. Blanco sobre #FF9850 da 2.1:1 y no cumple
     AA; el carbón da 8.9:1 y además asienta el botón. */
  --color-on-primary: #1a1a1a;

  /* ---- Tipografía ------------------------------------------------ */
  --font-display: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif;

  /* ---- Escala tipográfica -----------------------------------------
     Los topes son los del encargo: 72 para el titular del hero, 56
     para los de sección, 18 el subtítulo, 16 el cuerpo, 14 lo pequeño
     y 12 lo mínimo.

     Va en `clamp()` y no en tres consultas de medios porque el escalón
     entre 1023px y 1024px sería un salto de 16px de golpe. El mínimo
     de cada línea es el valor de móvil que pide el encargo, el máximo
     el de escritorio, y entre medias interpola: a 768px el titular
     cae solo en ~56px, que es justo la reducción del 20% pedida. */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.875rem;     /* 14 */
  --text-base: 1rem;       /* 16 */
  /* Las pendientes están calculadas para que la escalera del encargo
     caiga donde tiene que caer: el valor de tableta se alcanza a 900px
     y el de escritorio a 1440. Con una pendiente mayor el `clamp` toca
     techo antes de 1000px y en tableta ya se ve el tamaño grande, que
     es justo la reducción que el encargo pide. */
  --text-lg: clamp(1rem, 0.19vw + 0.96rem, 1.125rem);            /* 16 · 17 · 18 */
  --text-xl: clamp(1.25rem, 0.6vw + 1.02rem, 1.75rem);           /* 20 · 24 · 28 */
  --text-2xl: clamp(1.5rem, 0.74vw + 1.29rem, 2rem);             /* 24 · 28 · 32 */
  --text-3xl: clamp(1.75rem, 1.48vw + 1.42rem, 2.75rem);         /* 28 · 36 · 44 */
  --text-4xl: clamp(2.25rem, 2.04vw + 1.67rem, 3.5rem);          /* 36 · 45 · 56 */
  --text-5xl: clamp(3rem, 2.96vw + 1.84rem, 4.5rem);             /* 48 · 56 · 72 */

  /* El titular del hero, con su propio recorrido: 48 en móvil, 56 en
     tableta y 72 en escritorio, que es la escalera del encargo. */
  --text-hero: clamp(3rem, 2.96vw + 1.84rem, 4.5rem);

  /* 1.1 para los titulares grandes y 1.8 para el cuerpo: el encargo
     pide texto muy aireado, y en párrafo largo sobre fondo oscuro se
     agradece de verdad. */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.8;
  --leading-lede: 1.6;

  /* Los titulares grandes necesitan tracking negativo para no
     verse sueltos; el texto pequeño en mayúsculas, lo contrario. */
  --tracking-tight: -0.035em;
  --tracking-normal: 0;
  --tracking-wide: 0.14em;

  /* ---- Espaciado (del cliente, extendido) ------------------------ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 80px;
  --spacing-4xl: 120px;

  /* Ritmo vertical entre secciones */
  --section-y: clamp(64px, 9vw, 120px);

  /* ---- Radios (del cliente) -------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---- Layout ----------------------------------------------------- */
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 72px;

  /* ---- Sombras y luz ---------------------------------------------
     El resplandor naranja se usa solo en elementos de compra. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lifted: 0 2px 4px rgba(0, 0, 0, 0.34), 0 24px 56px rgba(0, 0, 0, 0.44);
  --glow-primary: 0 0 0 1px rgba(255, 152, 80, 0.28), 0 12px 40px rgba(255, 152, 80, 0.22);
  --glow-premium: 0 0 0 1px rgba(243, 156, 18, 0.4), 0 20px 60px rgba(243, 156, 18, 0.18);

  /* ---- Movimiento -------------------------------------------------
     Una curva con ligera aceleración de salida: el movimiento arranca
     rápido y se asienta, que es como se mueven los objetos reales. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  /* Muelle de la entrada del hero. Reproduce la física de un
     spring con bounce 0.3 y 1.5s: sobrepasa el destino un 4.6% a los
     0.75s y vuelve. Un cubic-bezier no puede describir un rebote —solo
     tiene dos puntos de control—, así que va como linear() muestreado
     de la simulación. Los navegadores sin linear() usan el respaldo
     declarado justo encima y se quedan en un frenado suave. */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: linear(
    0 0%, 0.0329 4.2%, 0.1152 8.3%, 0.2261 12.5%, 0.3495 16.7%,
    0.4739 20.8%, 0.5912 25%, 0.6965 29.2%, 0.7871 33.3%, 0.862 37.5%,
    0.9215 41.7%, 0.967 45.8%, 1 50%, 1.0226 54.2%, 1.0365 58.3%,
    1.0437 62.5%, 1.046 66.7%, 1.0447 70.8%, 1.041 75%, 1.036 79.2%,
    1.0303 83.3%, 1.0246 87.5%, 1.0191 91.7%, 1.0143 95.8%, 1 100%
  );
  --dur-spring: 1.5s;
  --dur-spring-slow: 2s;
}