/* ============================================================
   VEXTO — Design Foundations
   "Nada es demasiado pequeño. Nada es demasiado grande."
   ============================================================ */

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

/* Brand display faces — provided by VEXTO. Used for the wordmark and
   hero display type only. Body + UI remain Inter. */
@font-face {
  font-family: 'VEXTO Display';
  src: url('fonts/Helvetica_Neue_Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'VEXTO Display';
  src: url('fonts/Helvetica_Neue_Black.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VEXTO Display';
  src: url('fonts/Helvetica_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- CORE PALETTE ---------- */
  --vx-signal-core:     #2E5CFF;  /* El Punto. Uso enfático; nunca decorativo. */
  --vx-deep-void:       #050505;  /* Fondo oscuro. */
  --vx-warm-concrete:   #F0F0ED;  /* Fondo claro. Calidez. */
  --vx-structural-ink:  #0A0A0A;  /* Texto. */
  --vx-dim-metadata:    #888888;  /* Secundario, notas. */

  /* ---------- EXTENDED NEUTRALS ---------- */
  --vx-ink-100: #0A0A0A;
  --vx-ink-80:  #2A2A2A;
  --vx-ink-60:  #555555;
  --vx-ink-40:  #888888;
  --vx-ink-20:  #C2C2C0;
  --vx-ink-10:  #DCDCD9;
  --vx-ink-05:  #E6E6E3;

  --vx-void-100: #050505;
  --vx-void-90:  #0D0D0D;
  --vx-void-80:  #141414;
  --vx-void-70:  #1C1C1C;
  --vx-void-60:  #242424;
  --vx-void-line: #2A2A2A;

  /* ---------- SIGNAL TINTS ---------- */
  --vx-signal-hover:  #4A73FF;
  --vx-signal-press:  #1E44CC;
  --vx-signal-soft:   rgba(46, 92, 255, 0.10);
  --vx-signal-glow:   rgba(46, 92, 255, 0.30);

  /* ---------- SEMANTIC TOKENS (light surface default) ---------- */
  --fg-1: var(--vx-structural-ink);
  --fg-2: #3A3A3A;
  --fg-3: var(--vx-dim-metadata);
  --fg-accent: var(--vx-signal-core);
  --fg-inverse: var(--vx-warm-concrete);

  --bg-1: var(--vx-warm-concrete);
  --bg-2: #E8E8E4;
  --bg-3: #DDDDD8;
  --bg-inverse: var(--vx-deep-void);

  --line-1: rgba(10, 10, 10, 0.10);
  --line-2: rgba(10, 10, 10, 0.20);
  --line-accent: var(--vx-signal-core);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'VEXTO Display', 'Helvetica Neue', 'Helvetica', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl: clamp(56px, 7vw, 128px);
  --fs-display-l:  clamp(44px, 5.5vw, 88px);
  --fs-display-m:  clamp(36px, 4.2vw, 64px);
  --fs-h1:         clamp(32px, 3.2vw, 48px);
  --fs-h2:         clamp(24px, 2.2vw, 34px);
  --fs-h3:         20px;
  --fs-h4:         16px;
  --fs-body:       15px;
  --fs-body-s:     13px;
  --fs-meta:       12px;

  /* ---------- WEIGHTS ---------- */
  --fw-display: 700;
  --fw-display-mid: 500;
  --fw-body: 400;
  --fw-body-mid: 500;
  --fw-body-bold: 600;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display: 0.98;
  --lh-heading: 1.12;
  --lh-body: 1.55;
  --lh-tight: 1.3;

  /* ---------- TRACKING ---------- */
  --tr-display: -0.025em;
  --tr-tight:   -0.012em;
  --tr-normal:  0;
  --tr-label:   0.02em;     /* subtle tracking on small labels, not uppercase */

  /* ---------- RADII ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 6px;       /* softer default for cards */
  --r-3: 10px;
  --r-pill: 999px;
  --r-dot: 50%;

  /* ---------- SHADOWS ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10, 10, 10, 0.04), 0 0 0 1px rgba(10, 10, 10, 0.06);
  --shadow-2: 0 4px 14px rgba(10, 10, 10, 0.06), 0 0 0 1px rgba(10, 10, 10, 0.06);
  --shadow-focus: 0 0 0 3px var(--vx-signal-glow);

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

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 360ms;
}

/* ============================================================
   DARK SURFACE
   ============================================================ */
[data-surface="dark"] {
  --fg-1: #F2F2EF;
  --fg-2: #B8B8B5;
  --fg-3: #7A7A78;
  --fg-inverse: var(--vx-structural-ink);

  --bg-1: var(--vx-deep-void);
  --bg-2: var(--vx-void-80);
  --bg-3: var(--vx-void-70);
  --bg-inverse: var(--vx-warm-concrete);

  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);

  --shadow-1: 0 1px 0 rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-2: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);

  color: var(--fg-1);
  background: var(--bg-1);
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11', 'tnum' 0;
}

/* ---------- Display / Headings ---------- */
.vx-display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.vx-display-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.vx-display-m {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-m);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0;
}
h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  margin: 0;
}

p { margin: 0 0 var(--sp-3) 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); text-align: justify; text-justify: inter-word; hyphens: auto; max-width: 64ch; }
.vx-lede { font-size: 19px; line-height: 1.5; color: var(--fg-2); font-weight: 400; max-width: 60ch; }
.vx-body-s { font-size: var(--fs-body-s); }

/* Label — quiet, sentence-case, never all-caps */
.vx-label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  color: var(--fg-3);
}

/* Numbers: tabular */
.vx-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: var(--tr-tight);
}

/* The Pulse */
.vx-pulse {
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  border-radius: var(--r-dot);
  background: var(--vx-signal-core);
  vertical-align: baseline;
  margin-left: 0.06em;
}
.vx-pulse--lg { width: 0.55em; height: 0.55em; }

a {
  color: var(--vx-signal-core);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}
a:hover { border-bottom-color: var(--vx-signal-core); }

.vx-rule { border: 0; border-top: 1px solid var(--line-1); margin: var(--sp-8) 0; }