/* =============================================================================
   WEB DESIGN BASES — Foundations
   Base reutilizable para landings y webs.
   Filosofía: minimalismo, mucho aire, contención.

   REGLA DE ORO — Sin valores mágicos.
   Ningún color, espaciado, radio o tamaño tipográfico fuera de estos tokens.
   ============================================================================= */

/* Two brand families (max 2). System monospace is functional-only, for code. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------------------
     COLOR — "minimalismo brutal": negro + blanco + un solo acento.
     El acento se define POR PROYECTO. Cambia solo --color-accent (+ -strong/-soft).
     Todos los pares texto/fondo cumplen WCAG AA.
     --------------------------------------------------------------------------- */
  --color-bg:         #ffffff;   /* page background — el aire */
  --color-surface:    #f6f6f5;   /* raised/inset surfaces, cards, code blocks */
  --color-text:       #111111;   /* primary text (≈19:1 on bg) */
  --color-text-soft:  #6b6b6b;   /* secondary text, captions (≈5.0:1 on bg, AA) */
  --color-border:     #e6e6e4;   /* hairlines, dividers, input borders */
  --color-accent:     #2d52ff;   /* the single accent — CTAs, links, emphasis (5.6:1 on bg) */
  --color-accent-strong: #1f3fd6;/* hover/pressed accent */
  --color-accent-soft:   #eef1ff;/* accent-tinted surface (badges, selection) */

  /* On-accent text (for filled accent buttons) */
  --color-on-accent:  #ffffff;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY — escala modular ~1.25 (Major Third).
     12 · 14 · 16(base) · 20 · 25 · 31 · 39 · 49 · 61
     Body mínimo 16px. Líneas de cuerpo ~1.5; títulos 1.1–1.2. Máximo 2 familias.
     --------------------------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;  /* headings, display */
  --font-body:    'Hanken Grotesk', system-ui, sans-serif; /* body, UI */
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; /* code only */

  /* Scale steps */
  --text-xs:   0.75rem;  /* 12 */
  --text-sm:   0.875rem; /* 14 */
  --text-base: 1rem;     /* 16 — body floor */
  --text-md:   1.25rem;  /* 20 */
  --text-lg:   1.5625rem;/* 25 */
  --text-xl:   1.9375rem;/* 31 */
  --text-2xl:  2.4375rem;/* 39 */
  --text-3xl:  3.0625rem;/* 49 */
  --text-4xl:  3.8125rem;/* 61 */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:  1.1;  /* large display headings */
  --leading-snug:   1.2;  /* headings */
  --leading-normal: 1.5;  /* body */

  /* Tracking */
  --tracking-tight:  -0.02em; /* display headings */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;  /* eyebrows / overline labels */

  /* ---------------------------------------------------------------------------
     SPACING — grid de 8px. Todo valor es múltiplo de 8.
     (4px solo para detalles finos.)
     --------------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem; /* 4  — fine detail only */
  --space-2:   0.5rem;  /* 8 */
  --space-3:   1rem;    /* 16 */
  --space-4:   1.5rem;  /* 24 */
  --space-5:   2rem;    /* 32 */
  --space-6:   3rem;    /* 48 */
  --space-7:   4rem;    /* 64 */
  --space-8:   6rem;    /* 96 */
  --space-9:   8rem;    /* 128 */

  /* Layout */
  --measure:        66ch;   /* max line length for readable body text */
  --container:      1200px; /* max content width */
  --container-narrow: 760px;

  /* ---------------------------------------------------------------------------
     RADIUS — base 8px.
     --------------------------------------------------------------------------- */
  --radius-sm:   4px;   /* fine detail (tags, inputs) */
  --radius:      8px;   /* base — cards, buttons */
  --radius-lg:   16px;  /* large surfaces, modals */
  --radius-full: 999px; /* pills, avatars */

  /* ---------------------------------------------------------------------------
     SHADOW — 1–2 sombras suaves, no más.
     --------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06),
               0 1px 3px rgba(17, 17, 17, 0.08);
  --shadow-md: 0 4px 12px rgba(17, 17, 17, 0.08),
               0 2px 4px rgba(17, 17, 17, 0.06);

  /* ---------------------------------------------------------------------------
     MOTION — máximo 2 animaciones por página. Fades y desplazamientos cortos.
     --------------------------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle ease-out */
  --duration:    200ms;
  --duration-lg: 360ms;
}

/* =============================================================================
   SEMANTIC ELEMENT STYLES
   Drop this file into any page and the base elements inherit the system.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h5 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

p {
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

small { font-size: var(--text-sm); color: var(--color-text-soft); }

a {
  color: var(--color-accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration) var(--ease);
}
a:hover { color: var(--color-accent-strong); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* Overline / eyebrow label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

::selection { background: var(--color-accent-soft); color: var(--color-accent-strong); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}