/* ============================================================
   HostingCenter — Design Tokens
   Fuente de verdad para colores, tipografía, espaciado, radios,
   sombras y breakpoints. No usar valores hardcodeados fuera de
   este archivo: todo pasa por var(--token).
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     COLORES — Paleta de marca "Coral Digital"
     (ver sección 1.2 del documento maestro)
     ------------------------------------------------------------ */

  /* Primarios */
  --color-coral:        #FF4F5E;   /* Coral Digital — CTAs, logo, acentos */
  --color-coral-deep:   #E63946;   /* Coral Deep — hover, estados activos */
  --color-coral-soft:   #FFE4E7;   /* tint para fondos suaves, badges */

  /* Secundarios */
  --color-navy:         #0A0E27;   /* Navy Profundo — fondos oscuros, titulares */
  --color-navy-800:     #1A1F3A;   /* navy intermedio para gradientes */

  /* Acento */
  --color-green:        #05D29B;   /* Verde Fresh — checks, "gratis", éxito */
  --color-green-deep:   #04B586;   /* hover verde */
  --color-green-soft:   #D9FAEE;   /* tint verde para badges "gratis" */

  /* Neutros */
  --color-white:        #FFFFFF;
  --color-surface:      #F8F9FB;   /* fondo de secciones / cards */
  --color-surface-2:    #EEF1F6;   /* separadores suaves */
  --color-gray-300:     #CBD5E1;   /* bordes */
  --color-gray-500:     #64748B;   /* texto secundario */
  --color-gray-700:     #334155;   /* texto normal */
  --color-gray-800:     #1E293B;   /* texto principal sobre claro */

  /* Semánticos */
  --color-warning:      #F59E0B;   /* promos limitadas */
  --color-danger:       #DC2626;   /* errores */
  --color-success:      var(--color-green);
  --color-info:         #3B82F6;

  /* Roles (alias legibles) */
  --bg-page:            var(--color-white);
  --bg-section:         var(--color-surface);
  --bg-dark:            var(--color-navy);
  --text-primary:       var(--color-gray-800);
  --text-secondary:     var(--color-gray-500);
  --text-on-dark:       var(--color-white);
  --text-muted-on-dark: rgba(255,255,255,0.72);
  --border-subtle:      var(--color-gray-300);

  /* ------------------------------------------------------------
     TIPOGRAFÍA — Manrope (títulos) + Inter (cuerpo)
     Ambas via Google Fonts, licencia SIL OFL.
     ------------------------------------------------------------ */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tamaños (type scale) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Pesos */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* Letter spacing — Manrope se ve bien con -0.02em en displays */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* ------------------------------------------------------------
     ESPACIADO (base 4px / 0.25rem)
     ------------------------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;    /* 4 */
  --space-2:  0.5rem;     /* 8 */
  --space-3:  0.75rem;    /* 12 */
  --space-4:  1rem;       /* 16 */
  --space-5:  1.25rem;    /* 20 */
  --space-6:  1.5rem;     /* 24 */
  --space-8:  2rem;       /* 32 */
  --space-10: 2.5rem;     /* 40 */
  --space-12: 3rem;       /* 48 */
  --space-16: 4rem;       /* 64 */
  --space-20: 5rem;       /* 80 */
  --space-24: 6rem;       /* 96 */
  --space-32: 8rem;       /* 128 */

  /* ------------------------------------------------------------
     RADIOS
     ------------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------
     SOMBRAS
     ------------------------------------------------------------ */
  --shadow-sm:      0 1px 2px rgba(10,14,39,0.05);
  --shadow-md:      0 4px 16px rgba(10,14,39,0.08);
  --shadow-lg:      0 12px 32px rgba(10,14,39,0.12);
  --shadow-xl:      0 24px 48px rgba(10,14,39,0.16);
  --shadow-coral:   0 8px 24px rgba(255,79,94,0.25);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.06);

  /* ------------------------------------------------------------
     CONTENEDORES
     ------------------------------------------------------------ */
  --container-narrow:  720px;
  --container-default: 1040px;
  --container-wide:    1200px;
  --container-xwide:   1320px;
  --page-gutter:       clamp(1rem, 4vw, 2rem);

  /* ------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------ */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-overlay:  500;
  --z-modal:    700;
  --z-toast:    900;

  /* ------------------------------------------------------------
     TRANSICIONES
     ------------------------------------------------------------ */
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* ------------------------------------------------------------
     BREAKPOINTS (media queries — usar con min-width)
     Solo para referencia: las @media queries deben escribirse
     con los pixeles directamente, ya que custom properties no
     funcionan dentro de @media.
     - sm:  640px   (móvil grande / tablet vertical)
     - md:  768px   (tablet)
     - lg:  1024px  (desktop pequeño)
     - xl:  1280px  (desktop)
     - 2xl: 1536px  (desktop grande)
     ------------------------------------------------------------ */

  /* ------------------------------------------------------------
     HEADER
     ------------------------------------------------------------ */
  --header-height:        72px;
  --header-height-mobile: 60px;
  --announce-height:      36px;
}

/* Clase utilitaria para ocultar visualmente pero mantener accesible (SR-only) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}