/* ============================================================
   Purple Hackers — hoja de entrada del sistema de diseño

   Purple teaming: ataque y defensa como una sola disciplina.
   De ahí el color — ni rojo ni azul, púrpura.

   Las tipografías las declara fonts/fonts.css, que se importa
   desde styles.css junto a esta hoja.
   ============================================================ */

/* ---- base ---- */
:root {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--ph-void);
  color: var(--ph-bone);
  font-family: var(--ph-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Los titulares van en la display, siempre con tracking negativo:
   es lo que da el aire compacto de la marca. */
h1, h2, h3, h4 {
  font-family: var(--ph-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.9rem); letter-spacing: -0.032em; }
h3 { font-size: 1.14rem; letter-spacing: -0.02em; }

p { margin: 0; color: var(--ph-bone-dim); }

a { color: var(--ph-heliotrope); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visible en todo lo interactivo — requisito de accesibilidad. */
:focus-visible {
  outline: 2px solid var(--ph-heliotrope);
  outline-offset: 3px;
}

/* ---- el eyebrow: el recurso más característico del sistema ----
   Mono, versalitas y muy espaciado. Marca lo que es dato o término
   técnico, y da el tono de instrumental de red. */
.eyebrow {
  font-family: var(--ph-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ph-heliotrope);
  display: block;
}

/* ---- superficies ----
   Esquinas rectas siempre. Solo las insignias y los puntos son redondos. */
.surface {
  background: var(--ph-card);
  border: 1px solid var(--ph-line);
  border-radius: 0;
}