/*
  PULSART — Tokens visuales
  Fase 1 / Bloque 1 (Home)
  Fuente: PULSART_HOME_SPEC_EJECUCION.md §3 · PULSART_MASTER_WEBSITE_SPEC.md §5, §6
*/

:root {
  /* ===== Color — fondo (negro casi puro, no #000 absoluto) ===== */
  --bg-000: #050708;
  --bg-050: #080B0D;
  --bg-100: #0B1012;
  --bg-150: #101619;
  --bg-200: #151D20;

  /* ===== Color — texto ===== */
  --text-100: #F5F7F6;
  --text-200: #D7DEDC;
  --text-300: #98A6A3;
  --text-400: #64716F;

  /* ===== Color — líneas / separadores ===== */
  --line-100: rgba(255, 255, 255, .06);
  --line-200: rgba(255, 255, 255, .10);
  --line-300: rgba(255, 255, 255, .16);

  /* ===== Color — acento (teal). Uso puntual: 8–12% de la pantalla, nunca como fondo ===== */
  --accent: #0AA6A6;
  --accent-strong: #00B8B2;
  --accent-soft: #66D7D0;
  --accent-dark: #05706F;

  /* ===== Color — estado ===== */
  --success: #45C68B;
  --warning: #D8A84E;
  --danger: #D86A6A;

  /* ===== Tipografía — familia =====
     Self-hosted. Máximo 2 families activas a la vez.
     Los @font-face se agregan cuando estén los archivos de fuente. */
  --font-sans: "Inter", "Geist", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ===== Tipografía — escala (desktop, fluid con clamp) ===== */
  --fs-hero: clamp(64px, 6.4vw, 112px);
  --fs-h1: clamp(52px, 5vw, 88px);
  --fs-h2: clamp(38px, 4vw, 64px);
  --fs-h3: clamp(26px, 2.4vw, 40px);
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-label: 11px;

  --lh-hero: 0.98; /* rango permitido: 0.94–1.02 */
  --lh-heading: 1.08;
  --lh-body: 1.5;

  --ls-label: 0.08em; /* tracking para micro-etiquetas / eyebrows en mayúscula */

  /* ===== Grid y anchos ===== */
  --page-max: 1600px;
  --content-max: 1360px;
  --reading-max: 760px;
  --grid-gap: 24px;

  /* Gutters por breakpoint (aplicados en .page-shell / .content-shell) */
  --gutter-wide: 160px;   /* 1920px+ */
  --gutter-desktop: 64px; /* 1440–1919px */
  --gutter-laptop: 48px;  /* 1024–1439px */
  --gutter-tablet: 32px;  /* 768–1023px */
  --gutter-mobile: 20px;  /* <768px */
}

/*
  Breakpoints de referencia (sin custom media nativa en CSS plano):
  1920+      wide
  1440–1919  desktop
  1024–1439  laptop
  768–1023   tablet
  <768       mobile
*/

/* ===== Grid — utilidades base ===== */

.page-shell {
  width: min(100% - (var(--gutter-mobile) * 2), var(--page-max));
  margin-inline: auto;
}

.content-shell {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .page-shell {
    width: min(100% - (var(--gutter-tablet) * 2), var(--page-max));
  }
}

@media (min-width: 1024px) {
  .page-shell {
    width: min(100% - (var(--gutter-laptop) * 2), var(--page-max));
  }
}

@media (min-width: 1440px) {
  .page-shell {
    width: min(100% - (var(--gutter-desktop) * 2), var(--page-max));
  }
}

@media (min-width: 1920px) {
  .page-shell {
    width: min(100% - (var(--gutter-wide) * 2), var(--page-max));
  }
}