/* ==========================================================================
   STARTIA · Design tokens v1.0
   Identidad corporativa para web. Importar antes que cualquier otra hoja.
   ========================================================================== */

/* Tipografía: Inter / Inter Display (SIL OFL 1.1), autoalojada en /fonts */
@font-face{font-family:"Inter";src:url("../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("../fonts/InterDisplay-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("../fonts/InterDisplay-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* --- Colores de marca --- */
  --st-navy:        #0B1B3A;  /* Azul marino · color principal, texto del logo */
  --st-navy-800:    #13264D;
  --st-navy-700:    #1C3363;
  --st-blue:        #1F5EFF;  /* Azul Startia · acción, enlaces, botones */
  --st-blue-700:    #1747C7;  /* hover / pressed */
  --st-blue-50:     #E8EFFF;  /* fondos de etiqueta */
  --st-cyan:        #19C2D6;  /* Cian · acento, punto del logo (solo decorativo o sobre fondo oscuro) */
  --st-cyan-700:    #0B7A87;  /* cian legible como texto sobre blanco */
  --st-cyan-50:     #E6FAFC;

  /* --- Neutros --- */
  --st-ink:         #1C2333;  /* texto de cuerpo */
  --st-mute:        #5B6478;  /* texto secundario, lema OPERADORA */
  --st-mute-dark:   #B8C2D9;  /* texto secundario sobre azul marino */
  --st-line:        #E3E7EF;  /* bordes y separadores */
  --st-soft:        #F4F7FC;  /* fondos de sección y tarjetas suaves */
  --st-white:       #FFFFFF;

  /* --- Estados --- */
  --st-danger:      #E5484D;
  --st-warning:     #F5B83D;
  --st-warning-50:  #FFF8EA;
  --st-success:     #0E8A99;

  /* --- Degradados --- */
  --st-gradient:       linear-gradient(135deg, #1F5EFF 0%, #19C2D6 100%);  /* punto del logo, iconos */
  --st-gradient-text:  linear-gradient(90deg, #19C2D6 0%, #7FA6FF 100%);  /* titular destacado sobre oscuro */
  --st-gradient-hero:  radial-gradient(circle at 85% 15%, rgba(31,94,255,.55), transparent 45%),
                       radial-gradient(circle at 10% 90%, rgba(25,194,214,.35), transparent 45%),
                       #0B1B3A;

  /* --- Tipografía --- */
  --st-font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --st-font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --st-fs-xs: .75rem;    /* 12 */
  --st-fs-sm: .875rem;   /* 14 */
  --st-fs-md: 1rem;      /* 16 */
  --st-fs-lg: 1.125rem;  /* 18 */
  --st-fs-xl: 1.5rem;    /* 24 */
  --st-fs-2xl: 2rem;     /* 32 */
  --st-fs-3xl: 2.75rem;  /* 44 */
  --st-fs-4xl: clamp(2.5rem, 5vw + 1rem, 4.5rem); /* titular hero */
  --st-tracking-kicker: .16em;
  --st-tracking-logo:   .085em;

  /* --- Espaciado (base 4 px) --- */
  --st-space-1:4px; --st-space-2:8px; --st-space-3:12px; --st-space-4:16px;
  --st-space-5:24px; --st-space-6:32px; --st-space-7:48px; --st-space-8:64px; --st-space-9:96px;

  /* --- Radios y sombras --- */
  --st-radius-sm: 6px;
  --st-radius:    12px;
  --st-radius-lg: 16px;
  --st-radius-pill: 999px;
  --st-shadow-sm: 0 1px 2px rgba(11,27,58,.06);
  --st-shadow:    0 6px 24px rgba(11,27,58,.08);
  --st-shadow-lg: 0 18px 48px rgba(11,27,58,.14);

  /* --- Layout --- */
  --st-container: 1200px;
  --st-gutter: 16px;
}