/* ═══════════════════════════════════════════════════════════
   byval. — design tokens v1.0
   brutalismo tech cinemático
   fondo negro · acento lime · 0.5px borders · radius ≤4px
   ═══════════════════════════════════════════════════════════ */

/* local Space Grotesk (brand-supplied ttf) */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* local Inter (brand-supplied ttf) */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* local JetBrains Mono (brand-supplied ttf) */
@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-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── core ───────────────────────────────────────── */
  --byval-lime:      #B6FF1A;
  --byval-black:     #0A0A0A;     /* fondo base — NUNCA #000 puro */

  /* ── neutrals ───────────────────────────────────── */
  --byval-white:     #FFFFFF;     /* texto primario / titulares */
  --byval-gray-300:  #CCCCCC;     /* body copy / texto secundario */
  --byval-gray-500:  #666666;     /* metadata / timestamps / terciario */
  --byval-gray-800:  #2A2A2A;     /* bordes + separadores */
  --byval-gray-900:  #1A1A1A;     /* superficies elevadas sobre negro */

  /* ── signal (uso muy puntual — máx 1 por pieza) ─── */
  --byval-danger:    #FF3B3B;
  --byval-warning:   #FFB800;
  --byval-paper:     #F5F1E8;     /* variante clara sólo para PDFs */

  /* ── semánticos ─────────────────────────────────── */
  --bg:              var(--byval-black);
  --bg-elevated:     var(--byval-gray-900);
  --fg:              var(--byval-white);
  --fg-muted:        var(--byval-gray-300);
  --fg-meta:         var(--byval-gray-500);
  --border:          var(--byval-gray-800);
  --accent:          var(--byval-lime);

  /* ── typography families ────────────────────────── */
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* ── type scale (pre-tokenizado para semántica) ──── */
  --text-display-xl: 72px;   /* 700 / -3px / 0.9   */
  --text-display-lg: 48px;   /* 700 / -2px / 0.95  */
  --text-display-md: 32px;   /* 700 / -1.5px / 1   */
  --text-display-sm: 22px;   /* 700 / -0.5px / 1.2 */
  --text-body-lg:    18px;   /* 400 / 0 / 1.5      */
  --text-body-md:    15px;   /* 400 / 0 / 1.6      */
  --text-body-sm:    13px;   /* 400 / 0 / 1.5      */
  --text-mono-md:    13px;   /* 400 / +1px         */
  --text-mono-sm:    10px;   /* 400 / +2px UPPER   */

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

  /* ── radii (casi cuadrado — máx 4px) ────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── borders (SIEMPRE 0.5px) ────────────────────── */
  --border-hair:     0.5px solid var(--byval-gray-800);
  --border-faint:    0.5px solid rgba(255,255,255,0.08);
  --accent-bar:      3px solid var(--byval-lime);

  /* NO shadows · NO gradients · NO glow · NO blur */
}

/* ═══════════════════════════════════════════════════════════
   semantic element defaults (drop-in)
   ═══════════════════════════════════════════════════════════ */

.byval-surface {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── display (space grotesk, tracking negativo fuerte) ── */
.byval-h1, h1.byval {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-xl);
  letter-spacing: -3px;
  line-height: 0.9;
  color: var(--fg);
  margin: 0;
}
.byval-h2, h2.byval {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-lg);
  letter-spacing: -2px;
  line-height: 0.95;
  color: var(--fg);
  margin: 0;
}
.byval-h3, h3.byval {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-md);
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--fg);
  margin: 0;
}
.byval-h4, h4.byval {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-sm);
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--fg);
  margin: 0;
}

/* ── body (inter) ──────────────────────────────────── */
.byval-lead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
}
.byval-p, p.byval {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-muted);
}
.byval-small {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-meta);
}

/* ── mono / HUD ────────────────────────────────────── */
.byval-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-md);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--fg-muted);
}
.byval-hud,
.byval-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-meta);
}

/* ── wordmark ──────────────────────────────────────── */
.byval-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: var(--fg);
  line-height: 1;
}
.byval-wordmark .dot { color: var(--byval-lime); }

/* ── section prefix (§ or //) ──────────────────────── */
.byval-section-tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--byval-lime);
}

/* ── border-left accent (destacar) ─────────────────── */
.byval-accent-bar {
  border-left: var(--accent-bar);
  padding-left: var(--space-5);
}

/* ── card base ─────────────────────────────────────── */
.byval-card {
  background: var(--bg-elevated);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

/* ── link ──────────────────────────────────────────── */
.byval-link {
  color: var(--byval-lime);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.byval-link:hover { opacity: 0.7; }