/* ============================================================
   WEBMASTER LEO — Tokens del sistema
   Fuente única: WEBMASTER_LEO_Branding_Brief.md
   Ningún color, tamaño o fuente se declara fuera de este archivo.
   ============================================================ */

:root {
  /* ---- Paleta oficial ---------------------------------------- */
  --blue:          #0878F9;   /* principal: CTAs, enlaces, hover  */
  --blue-deep:     #063B8F;   /* profundidad, degradados, overlay */
  --cyan:          #00C8FF;   /* iluminación: glow, filos          */
  --yellow:        #FFC400;   /* energía, destaque                 */
  --red:           #F20D2F;   /* acción, conversión, velocidad     */
  --black:         #05070A;   /* fondo principal                   */
  --black-2:       #0B111A;   /* superficies: tarjetas, paneles    */
  --white:         #F5F7FA;   /* títulos y texto                   */

  /* ---- Roles semánticos --------------------------------------
     Los componentes usan estos, nunca los colores crudos. Así el
     60/30/10 se sostiene solo: el negro manda, el azul ilumina,
     amarillo y rojo aparecen contados.                            */
  --bg:            var(--black);
  --bg-elev:       #080C13;
  --surface:       var(--black-2);
  --surface-2:     #101825;
  --surface-3:     #162030;

  --ink:           var(--white);
  --ink-2:         #A9B6C8;
  --ink-3:         #6C7A8D;

  --line:          rgba(8,120,249,.14);
  --line-2:        rgba(8,120,249,.25);   /* borde de tarjeta      */
  --line-hi:       var(--blue);           /* borde en hover        */

  --accent:        var(--blue);
  --accent-hi:     var(--cyan);
  --accent-soft:   rgba(8,120,249,.10);

  --focus:         var(--cyan);

  /* ---- Degradados oficiales ----------------------------------- */
  --grad-tech:     linear-gradient(120deg, var(--blue-deep), var(--blue) 52%, var(--cyan));
  --grad-premium:  linear-gradient(160deg, var(--black), var(--blue-deep) 58%, var(--blue));
  --grad-action:   linear-gradient(100deg, var(--yellow), var(--red));

  /* ---- Glow ---------------------------------------------------
     Iluminación tecnológica realista. Nunca sobre todo a la vez.  */
  --glow-blue:     0 0 25px rgba(8,120,249,.35);
  --glow-cyan:     0 0 35px rgba(0,200,255,.25);
  --glow-card:     0 0 0 1px rgba(8,120,249,.35), 0 18px 50px rgba(0,0,0,.6), 0 0 35px rgba(0,200,255,.14);

  /* ---- Tipografía --------------------------------------------
     Sora  → personalidad (titulares)
     Inter → legibilidad (cuerpo, UI)
     Rajdhani → carácter técnico (métricas, etiquetas)             */
  --f-display: "Sora", system-ui, -apple-system, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;
  --f-tech:    "Rajdhani", "Segoe UI", system-ui, sans-serif;

  /* Escala fluida, calibrada a la baja respecto al rango del brief §7.
     Titulares más contenidos leen como consultoría técnica; los tamaños
     grandes leen como landing de infoproducto. El peso 800 de Sora ya
     aporta presencia de sobra sin necesidad de 72px. */
  --t-h1:   clamp(2.125rem, 1.72rem + 1.95vw, 3.25rem);   /* 34 → 52 px */
  --t-h2:   clamp(1.625rem, 1.42rem + 0.95vw, 2.25rem);   /* 26 → 36 px */
  --t-h3:   clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);  /* 18 → 22 px */
  /* Cuerpo: +1,5 pt sobre la versión original y luego −0,5 pt de
     ajuste fino. Neto +1 pt (≈1,3 px). Los titulares no se tocan:
     ya estaban calibrados y moverlos rompe el equilibrio. */
  --t-lead: clamp(1.083rem, 1.05rem + 0.19vw, 1.208rem);  /* 17,3 → 19,3 px */
  --t-body: clamp(1.021rem, 0.99rem + 0.13vw, 1.083rem);  /* 16,3 → 17,3 px */
  --t-sm:   0.958rem;     /* 15,3 px */
  --t-xs:   0.854rem;     /* 13,7 px */
  --t-2xs:  0.729rem;     /* 11,7 px */

  --lh-tight:  1.1;
  --lh-snug:   1.32;
  --lh-body:   1.68;

  --ls-h:      -0.03em;   /* Sora en bold pide tracking negativo   */
  --ls-caps:   0.16em;    /* Rajdhani en versalitas                */

  /* ---- Espacio: escala de 4 ----------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6.5rem; --s-12: 8rem;
  --s-sec: clamp(4.5rem, 3rem + 6.5vw, 9rem);

  /* ---- Rejilla y medidas -------------------------------------- */
  --cols: 12;
  --gutter: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  --w-max: 78rem;
  --w-prose: 66ch;
  --pad-x: clamp(1.25rem, .8rem + 2vw, 3rem);

  /* ---- Radios: modernos, no redondeados de más ---------------- */
  --r-sm: 4px;  --r-md: 10px;  --r-lg: 18px;  --r-xl: 28px;  --r-full: 999px;

  /* ---- Sombras: profundidad controlada, nunca exagerada ------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 10px 30px rgba(0,0,0,.45);
  --sh-3: 0 28px 70px rgba(0,0,0,.6);

  /* ---- Movimiento ---------------------------------------------- */
  --e-out:  cubic-bezier(.22, 1, .36, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --d-fast: 160ms;
  --d-base: 300ms;
  --d-slow: 700ms;
}