/* =========================================================
   ALLIANCE MARITIME — Design tokens
   Corporativo, técnico, marítimo.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- COLOR: Navy (primario) ---------- */
  --navy-950: #061426;
  --navy-900: #0B2340;   /* PRIMARIO — brand core */
  --navy-800: #133357;
  --navy-700: #1D466F;
  --navy-600: #2A5A85;
  --navy-500: #3F739E;
  --navy-400: #6E97B7;
  --navy-300: #A2BCD1;
  --navy-200: #CBD9E5;
  --navy-100: #E4ECF3;
  --navy-50:  #F2F6FA;

  /* ---------- COLOR: Gold (acento único) ---------- */
  --gold-700: #8C6F14;
  --gold-600: #A88818;
  --gold-500: #C9A227;   /* ACENTO — CTA / KPI */
  --gold-400: #D8B450;
  --gold-300: #E5C77E;
  --gold-100: #F6ECC7;
  --gold-50:  #FBF6E5;

  /* ---------- COLOR: Neutrales ---------- */
  --ink-950: #0F172A;    /* texto principal */
  --ink-800: #1F2937;
  --ink-700: #374151;
  --ink-600: #4B5563;    /* texto secundario */
  --ink-500: #6B7683;    /* texto terciario / labels */
  --ink-400: #9AA3AF;
  --ink-300: #C3C9D2;
  --ink-200: #E5E9EF;    /* borde estándar */
  --ink-100: #EEF1F5;    /* borde suave */
  --ink-50:  #F5F7FA;    /* fondo tenue */
  --white:   #FFFFFF;

  /* ---------- COLOR: Semánticos ---------- */
  --success:      #0F7A4B;
  --success-bg:   #E3F2EA;
  --danger:       #B4232B;
  --danger-bg:    #FBE7E8;
  --warning:      #B8611A;
  --warning-bg:   #FCEEDE;
  --info:         #1D466F;
  --info-bg:      #E4ECF3;

  /* ---------- Superficies ---------- */
  --surface-page:      var(--white);
  --surface-tinted:    var(--ink-50);
  --surface-elevated:  var(--white);
  --surface-brand:     var(--navy-900);
  --surface-brand-alt: var(--navy-950);

  /* ---------- Texto ---------- */
  --fg-1: var(--ink-950);   /* principal */
  --fg-2: var(--ink-600);   /* secundario */
  --fg-3: var(--ink-500);   /* labels / meta */
  --fg-mute: var(--ink-400);
  --fg-inverse: var(--white);
  --fg-brand:   var(--navy-900);
  --fg-accent:  var(--gold-600);
  --fg-link:    var(--navy-700);

  /* ---------- Bordes ---------- */
  --border-1: var(--ink-200);
  --border-2: var(--ink-100);
  --border-strong: var(--ink-300);
  --border-brand:  var(--navy-900);
  --border-focus:  var(--navy-700);

  /* ---------- Tipografía ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, 'Roboto Mono', monospace;

  /* Escala tipográfica — sobria, técnica */
  --fs-display: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-h4: 16px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-micro: 11px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;   /* eyebrows / labels TODO CAPS */

  /* ---------- Espaciado (base 4) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* ---------- Radios (mínimos) ---------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;   /* máximo permitido */
  --radius-pill: 999px;

  /* ---------- Sombras (mínimas, técnicas) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(11, 35, 64, 0.04), 0 1px 2px rgba(11, 35, 64, 0.06);
  --shadow-2: 0 2px 6px rgba(11, 35, 64, 0.08), 0 1px 2px rgba(11, 35, 64, 0.04);
  --shadow-3: 0 8px 24px rgba(11, 35, 64, 0.10);
  --shadow-focus: 0 0 0 3px rgba(29, 70, 111, 0.20);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 880px;
  --gutter: 24px;
  --header-h: 68px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* =========================================================
   Base
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--surface-page);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Semánticos: heading / body / mono
   ========================================================= */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-accent);
}

.t-display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

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

.t-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

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

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

.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-small { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.t-meta { font-size: var(--fs-xs); color: var(--fg-3); letter-spacing: 0.02em; }
.t-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.t-mono, code, .t-data {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.t-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}