/* ============================================================
   ResoluTEC — Colors & Type
   Brand foundations: paleta corporativa + tipografías.
   ============================================================ */

/* ---------- FONTS: JetBrains Mono (local) ----------
   Solo los dos pesos usados en el sitio: Regular (400) y Medium (500).
   --------------------------------------------------------- */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Montserrat: cargada via Google Fonts en <link> en el HTML (pesos 400-800).
   Si en el futuro se entregan los .ttf/.woff2, anadir aqui @font-face. */

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  /* ---- Colors: base palette ---- */
  --azul-noche:        #0A1628;
  --azul-corporativo:  #004B8D;
  --azul-tecnologico:  #0072C6;
  --azul-brillante:    #0090E8;
  --azul-claro:        #D8EAF2;
  --blanco:            #FFFFFF;

  /* ---- Colors: extended neutrals (derived for UI) ---- */
  --noche-2:           #0F1E36;
  --hueso:             #F6F9FC;
  --linea:             #E4ECF3;
  --texto:             #1B2A41;
  --texto-mute:        #5A6B82;

  /* ---- Colors: semantic ---- */
  --fg-1:              var(--azul-noche);
  --fg-2:              var(--texto-mute);
  --fg-on-dark:        var(--blanco);
  --bg:                var(--blanco);
  --bg-soft:           var(--hueso);
  --bg-dark:           var(--azul-noche);
  --border:            var(--linea);
  --accent:            var(--azul-brillante);
  --accent-strong:     var(--azul-corporativo);
  --link:              var(--azul-tecnologico);

  /* ---- Type families ---- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type weights ---- */
  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;  /* Montserrat principal */
  --w-bold:      700;
  --w-extrabold: 800;  /* Montserrat display */

  /* ---- Type scale ---- */
  --fs-display:  clamp(40px, 5.6vw, 72px);
  --fs-h1:       clamp(36px, 4.6vw, 56px);
  --fs-h2:       clamp(32px, 3.8vw, 48px);
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body-lg:  19px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-mono:     13px;

  /* ---- Line heights ---- */
  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-mono:     0.05em;
  --ls-eyebrow:  0.14em;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
}

.t-code {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--fs-mono);
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}