/* ============================================================
   THEME TOKENS — Este es el ÚNICO archivo de estilos que
   deberías tocar para cambiar la identidad visual del producto.
   No agregues reglas de layout acá; sólo variables.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --paper:        #F1F3EE;  /* fondo general, papel verde-gris pálido */
  --paper-2:      #FAFBF8;  /* superficies elevadas (cards) */
  --ink:          #14181B;  /* texto principal */
  --ink-soft:     #5C6660;  /* texto secundario */
  --line:         #D8DCD4;  /* bordes hairline */
  --brand:        #1F45D8;  /* color de acción: botones, links, foco */
  --brand-deep:   #0F2A8C;  /* fondos oscuros de marca */
  --brand-ink:    #FFFFFF;  /* texto sobre --brand / --brand-deep */
  --accent:       #FFC53D;  /* subrayados, highlights, badges */
  --danger:       #B3261E;  /* errores de formulario */

  /* ---------- Tipografía ---------- */
  --font-display: "Familjen Grotesk", "Archivo", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  /* ---------- Forma y profundidad ---------- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 27, .06);
  --shadow:    0 12px 28px -12px rgba(20, 24, 27, .18);
  --shadow-lg: 0 30px 60px -24px rgba(20, 24, 27, .28);

  /* ---------- Ritmo ---------- */
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --maxw:    1180px;
  --maxw-text: 62ch;

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur:  .45s;
}

/* Variante oscura para la sección de alta (invertida).
   Se aplica con la clase .is-inverted sobre un contenedor. */
.is-inverted {
  --paper:     var(--brand-deep);
  --paper-2:   rgba(255, 255, 255, .06);
  --ink:       #FFFFFF;
  --ink-soft:  rgba(255, 255, 255, .68);
  --line:      rgba(255, 255, 255, .18);
  --brand:     var(--accent);
  --brand-ink: #14181B;
  --shadow:    0 20px 50px -20px rgba(0, 0, 0, .5);
}