/* /assets/css/config.css */
/* =========================================================
   Design Tokens (customizables)
   - Cambia aquí paleta y tipografía sin tocar componentes
   - Correcciones: tokens semánticos alineados con tu palette
     (bg/text/muted/surface/border) + RGB coherentes
 ========================================================= */

/* =========================================================
   MovistarSans (self-hosted)
   ========================================================= */

/* Light 300 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Light.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Light Italic 300 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Light-Italic.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Light-Italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular 400 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Regular.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic 400 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Italic.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium 500 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Medium.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Medium Italic 500 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Medium-Italic.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Medium-Italic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Bold 700 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Bold.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic 700 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Bold-Italic.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Bold-Italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold 800 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Extrabold.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Extrabold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold Italic 800 */
@font-face {
  font-family: "MovistarSans";
  src:
    url("/assets/fonts/movistar/MovistarSans-Extrabold-Italic.woff2") format("woff2"),
    url("/assets/fonts/movistar/MovistarSans-Extrabold-Italic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root{
  /* =========================================================
     Typography
     ========================================================= */
  --font-sans: "MovistarSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font sizes (scale) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-28: 28px;
  --fs-40: 40px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-base: 1.35;

  /* =========================================================
     Escalas Movistar
     ========================================================= */

  --fs-hero-title: clamp(42px, 7vw, 84px);
  --lh-hero-title:.95;
  --fw-hero-title:800;
  
  --fs-hero-lead: clamp(18px, 2vw, 20px);
  --lh-hero-lead: 1.5;
	
  /* Sección */
  --fs-section-hero: 50px;

  --fs-section-title: 32px;
  --lh-section-title: 38px;
  --fw-section-title: 400;

  --fs-section-subtitle: 20px;
  --lh-section-subtitle: 26px;
  --fw-section-subtitle: 400;

  --fs-section-body: 20px;
  --lh-section-body: 1.2; /* 120% */
  --fw-section-body: 400;

  /* Elementos (cards, componentes) */
  --fs-element-title: 24px;
  --lh-element-title: 28px;
  --fw-element-title: 400;

  --fs-element-body: 20px;
  --lh-element-body: 26px;
  --fw-element-body: 400;

  --fs-element-nav: 15px;
  --lh-element-nav: 15px;
  --fw-element-nav: 400;

  --fs-element-badge: 16px;
  --lh-element-badge: 22px;
  --fw-element-badge: 400;

  --fs-element-button: 18px;
  --lh-element-button: 24px;
  --fw-element-button: 400;

  /* =========================================================
     MOVISTAR ARENA PALETTE
     ========================================================= */

  /* Ink (grises) */
  --ma-ink:     #262423;
  --ma-ink-rgb: 38,36,35;

  --ma-ink-90:  #413F3D;
  --ma-ink-80:  #5C5A58;
  --ma-ink-70:  #777472;
  --ma-ink-60:  #938F8C;
  --ma-ink-50:  #AEAAA6;
  --ma-ink-40:  #CAC4C1;
  --ma-ink-30:  #E4DFD8;

  /* Brand blue */
  --ma-blue:     #0066FF;
  --ma-blue-rgb: 0,102,255;

  /* Dark blue (arena base) */
  --ma-dark-blue:     #031a34;
  --ma-dark-blue-rgb: 3,26,52;

  /* Aqua */
  --ma-aqua-60:  #f6f8f7;
  --ma-aqua-70:  #edf5f9;
  --ma-aqua-80:  #e5f3fb;
  --ma-aqua-90:  #dcf0fd;
  --ma-aqua-100: #d3eeff;
  --ma-aqua-rgb: 211,238,255;
  --ma-aqua-110: #a9cbeb;
  --ma-aqua-120: #7fa8d7;
  --ma-aqua-130: #5686c2;
  --ma-aqua-140: #2c63ae;
  --ma-aqua-150: #02409a;

  /* Green */
  --ma-green-60:  #f5f9ea;
  --ma-green-70:  #ebf9df;
  --ma-green-80:  #e2f8d5;
  --ma-green-90:  #d8f8ca;
  --ma-green-100: #cef7bf;
  --ma-green-rgb: 206,247,191;
  --ma-green-110: #b0d8a0;
  --ma-green-120: #92ba82;
  --ma-green-130: #5686c2; /* (tu valor original; revisar si es intencional) */
  --ma-green-140: #567d45;
  --ma-green-150: #385e26;

  /* Yellow */
  --ma-yellow-60:  #fff7e3;
  --ma-yellow-70:  #fff3d1;
  --ma-yellow-80:  #fff0c0;
  --ma-yellow-90:  #ffecae;
  --ma-yellow-100: #ffe99c;
  --ma-yellow-rgb: 255,233,156;
  --ma-yellow-110: #e3cc7e;
  --ma-yellow-120: #c7af5f;
  --ma-yellow-130: #aa9241;
  --ma-yellow-140: #8e7522;
  --ma-yellow-150: #725804;

  /* Coral */
  --ma-coral-60:  #ffefe6;
  --ma-coral-70:  #ffe5d6;
  --ma-coral-80:  #ffdac7;
  --ma-coral-90:  #ffd0b7;
  --ma-coral-100: #ffc5a8;
  --ma-coral-rgb: 255,197,168;
  --ma-coral-110: #e4a98d;
  --ma-coral-120: #c98e72;
  --ma-coral-130: #ad7256;
  --ma-coral-140: #92573b;
  --ma-coral-150: #773b20;

  /* Cream */
  --ma-cream:     #FFFAF5;
  --ma-cream-rgb: 255,250,245;

  /* Cristal */
  --ma-relleno-cristal: rgba(var(--ma-dark-blue-rgb), .30);
  --w-relleno-cristal:  rgba(var(--ma-cream-rgb), .07);

  /* Status */
  --ma-ok:        #06833B;
  --ma-warn:      #A17E09;
  --ma-danger:    #F10000;
  --ma-danger-rgb: 241,0,0;

  /* =========================================================
     Fondo (para tu background animado)
     ========================================================= */

  /* Fondo base sólido */
  --bg-base: var(--ma-dark-blue);
  /* Base (dark-first) */
  --bg: var(--bg-base);
  /* Fondo degradado (RGB + alpha) */
  --color-fondo-degradado-1: var(--ma-blue-rgb);
  --alfa-fondo-degradado-1: .18;

  --color-fondo-degradado-2: var(--ma-coral-rgb);
  --alfa-fondo-degradado-2: .55;

  --color-fondo-degradado-3: var(--ma-blue-rgb);
  --alfa-fondo-degradado-3: .18;

  --color-fondo-degradado-4: var(--ma-coral-rgb);
  --alfa-fondo-degradado-4: .45;

  --color-fondo-degradado-5: var(--ma-blue-rgb);
  --alfa-fondo-degradado-5: .35;

  --transparent-fondo-degradado: 100%;

  /* =========================================================
     MOVISTAR PALETTE (general)
     ========================================================= */
  --m-dark-blue:     #022d67;
  --m-dark-blue-rgb: 2,45,103;

  /* =========================================================
     SEMANTIC TOKENS (lo que usan los componentes)
     ========================================================= */



  /* Importante: alineamos con tu “crema” (antes era blanco puro) */
  --text:  rgba(var(--ma-cream-rgb), 0.92);
  --muted: rgba(var(--ma-cream-rgb), 0.68);

  /* Surfaces */
  --surface:   rgba(255, 255, 255, 0.08);
  --surface-2: rgba(255, 255, 255, 0.12);
  --border:    rgba(255, 255, 255, 0.14);
	
  --divider-color: color-mix(in srgb, var(--border) 100%, transparent);
  --divider-color: #fff;
  --divider-size: 1px;
  --divider-gap: 14px;

  /* Brand */
  --brand: var(--ma-blue);

  /* Venues */
  --arena: var(--ma-blue);
  --sala:  #22c55e;
  --truss: #ff4fd8;

  /* States */
  --ok:      var(--ma-ok);
  --warning: var(--ma-warn);
  --danger:  var(--ma-danger);

  /* Radii */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;

  /* Shadows  horizontal vertical desenfoque  extensión Color inset (interior) */
  /* box-shadow: 5px 10px 15px 5px rgba(0,0,0,0.3) inset; */
  --shadow-1: 0 0px 35px rgba(var(--ma-dark-blue-rgb),0.35);
  --shadow-2: 0 18px 50px 5px  rgba(var(--ma-dark-blue-rgb),0.75);

  /* Glass */
  --glass-blur: 18px;
  --glass-sat: 1.25;

  /* Layout */
  --container: 1120px;
  --pad: 16px;
  --pad--section: 60px 20px;
  --gap: 14px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 160ms;
  --dur-2: 260ms;

  color-scheme: dark;
}

/* (Opcional) Modo claro */
@media (prefers-color-scheme: light) {
  :root{
    --bg: var(--ma-cream);
    --text: rgba(var(--ma-ink-rgb), 0.92);
    --muted: rgba(var(--ma-ink-rgb), 0.62);

    --surface:   rgba(255, 255, 255, 0.78);
    --surface-2: rgba(255, 255, 255, 0.92);
    --border:    rgba(var(--ma-ink-rgb), 0.12);

    --shadow-1: 0 10px 30px rgba(0,0,0,0.10);
    --shadow-2: 0 20px 55px rgba(0,0,0,0.12);

    color-scheme: light;
  }
}