/* ==========================================================================
   ProFlight — Core tokens: colors + typography
   Fuente: sistema de diseño ProFlight (sep-2026), entregado por Edison.
   Único cambio respecto del original: Inter se carga desde el <head> con
   <link rel="preconnect"> + <link rel="stylesheet"> en vez de @import acá,
   para que la fuente no bloquee el render en serie con este archivo.
   ========================================================================== */

:root {
  /* ---------- Core palette ---------- */
  --color-white:      #FFFFFF;
  --color-black:      #1D1D1B;
  --color-deep-blue:  #061F31; /* institucional primario */
  --color-blue:       #05385C; /* secundario / acciones */
  --color-gray:       #5C5B5C;
  --color-gray-cloud: #DCE2E2;
  --color-light-gray: #EEEEEE;

  /* Nota: #00B0CE Light Blue está DEPRECADO. No usar. */

  /* ---------- Semantic: backgrounds ---------- */
  --bg-primary: var(--color-white);
  --bg-brand:   var(--color-deep-blue);
  --bg-subtle:  var(--color-light-gray);
  --bg-muted:   var(--color-gray-cloud);

  /* ---------- Semantic: text ---------- */
  --text-primary:   var(--color-black);
  --text-secondary: var(--color-gray);
  --text-inverse:   var(--color-white);
  --text-accent:    var(--color-blue);

  /* ---------- Semantic: borders ---------- */
  --border-default: var(--color-gray-cloud);
  --border-strong:  var(--color-gray);

  /* ---------- Semantic: actions ---------- */
  --action-primary:          var(--color-blue);
  --action-primary-hover:    var(--color-deep-blue);
  --action-secondary-bg:     var(--color-white);
  --action-secondary-border: var(--color-gray-cloud);
  --action-ghost-hover-bg:   var(--color-light-gray);

  /* ---------- Gradients ---------- */
  --gradient-hero: linear-gradient(135deg, #061F31 0%, #05385C 100%);
  --gradient-mark: linear-gradient(180deg, #003C67 0%, #1D1D1B 100%);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Serif wordmark es asset-only — NUNCA como stack de texto UI */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --text-display-size: 3.5rem;   /* 56 */
  --text-display-lh:   1.05;
  --text-h1-size:      2.5rem;   /* 40 */
  --text-h1-lh:        1.1;
  --text-h2-size:      2rem;     /* 32 */
  --text-h2-lh:        1.15;
  --text-h3-size:      1.5rem;   /* 24 */
  --text-h3-lh:        1.25;
  --text-h4-size:      1.25rem;  /* 20 */
  --text-h4-lh:        1.3;
  --text-body-lg-size: 1.125rem; /* 18 */
  --text-body-lg-lh:   1.5;
  --text-body-size:    1rem;     /* 16 */
  --text-body-lh:      1.5;
  --text-body-sm-size: 0.875rem; /* 14 */
  --text-body-sm-lh:   1.5;
  --text-caption-size: 0.75rem;  /* 12 */
  --text-caption-lh:   1.4;

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ---------- Spacing (escala 4px) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Elevation (sobrio; la marca es mate) ---------- */
  --shadow-xs:  0 1px 2px rgba(6, 31, 49, 0.06);
  --shadow-sm:  0 1px 3px rgba(6, 31, 49, 0.08), 0 1px 2px rgba(6, 31, 49, 0.04);
  --shadow-md:  0 4px 12px rgba(6, 31, 49, 0.08);
  --shadow-lg:  0 12px 32px rgba(6, 31, 49, 0.12);
  --shadow-focus: 0 0 0 3px rgba(5, 56, 92, 0.20);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- Component heights ---------- */
  --btn-h-sm:  40px;
  --btn-h-md:  48px;
  --btn-h-lg:  56px;
}

/* ==========================================================================
   Clases semánticas de texto — espejan los tokens 1:1
   ========================================================================== */

html { font-family: var(--font-sans); color: var(--text-primary); }
body { margin: 0; background: var(--bg-primary); -webkit-font-smoothing: antialiased; }

.text-display  { font: var(--fw-bold) var(--text-display-size)/var(--text-display-lh) var(--font-sans); letter-spacing: -0.02em; }
.text-h1       { font: var(--fw-bold) var(--text-h1-size)/var(--text-h1-lh) var(--font-sans); letter-spacing: -0.015em; }
.text-h2       { font: var(--fw-semibold) var(--text-h2-size)/var(--text-h2-lh) var(--font-sans); letter-spacing: -0.01em; }
.text-h3       { font: var(--fw-semibold) var(--text-h3-size)/var(--text-h3-lh) var(--font-sans); letter-spacing: -0.005em; }
.text-h4       { font: var(--fw-semibold) var(--text-h4-size)/var(--text-h4-lh) var(--font-sans); }
.text-body-lg  { font: var(--fw-regular) var(--text-body-lg-size)/var(--text-body-lg-lh) var(--font-sans); }
.text-body     { font: var(--fw-regular) var(--text-body-size)/var(--text-body-lh) var(--font-sans); }
.text-body-sm  { font: var(--fw-regular) var(--text-body-sm-size)/var(--text-body-sm-lh) var(--font-sans); }
.text-caption  { font: var(--fw-medium) var(--text-caption-size)/var(--text-caption-lh) var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }

.fg-primary   { color: var(--text-primary); }
.fg-secondary { color: var(--text-secondary); }
.fg-inverse   { color: var(--text-inverse); }
.fg-accent    { color: var(--text-accent); }

.bg-primary { background: var(--bg-primary); }
.bg-brand   { background: var(--bg-brand); color: var(--text-inverse); }
.bg-subtle  { background: var(--bg-subtle); }
.bg-muted   { background: var(--bg-muted); }