/* Anne Elena — design tokens. Fuente de verdad: BRAND.md */

:root {
  /* Color */
  --ae-ink: #111111;        /* texto, logo, botón primario */
  --ae-paper: #ffffff;      /* fondo principal */
  --ae-mist: #f5f5f5;       /* fondo de sección alterna, campos deshabilitados */
  --ae-line: #e6e6e6;       /* bordes y divisores */
  --ae-stone: #6b6b6b;      /* texto secundario sobre paper o mist */
  --ae-night: #0f0f10;      /* fondo oscuro (una sección por página, o el footer) */
  --ae-on-night: #ffffff;   /* texto sobre night */
  --ae-on-night-2: #a3a3a3; /* texto secundario sobre night */
  --ae-error: #b3261e;      /* solo mensajes de error */

  /* Tipografía */
  --ae-font: "Jost", "Helvetica Neue", Helvetica, sans-serif;
  --ae-weight-light: 300;
  --ae-weight-regular: 400;
  --ae-weight-medium: 500;

  --ae-display: clamp(2.5rem, 1.6rem + 4vw, 3.5rem);   /* 40 → 56 */
  --ae-h1: clamp(2rem, 1.6rem + 1.8vw, 2.5rem);        /* 32 → 40 */
  --ae-h2: clamp(1.5rem, 1.35rem + 0.7vw, 1.75rem);    /* 24 → 28 */
  --ae-h3: 1.25rem;                                     /* 20 */
  --ae-body: 1.125rem;                                  /* 18 */
  --ae-small: 0.9375rem;                                /* 15 */
  --ae-label: 0.8125rem;                                /* 13 */

  --ae-lh-tight: 1.08;
  --ae-lh-heading: 1.2;
  --ae-lh-body: 1.55;
  --ae-track-display: -0.02em;
  --ae-track-label: 0.14em;

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

  /* Layout */
  --ae-container: 1120px;
  --ae-measure: 640px;                         /* ancho máximo de texto y formularios */
  --ae-gutter: clamp(20px, 5vw, 48px);
  --ae-section: clamp(64px, 12vw, 128px);      /* aire vertical entre secciones */

  /* Forma */
  --ae-radius-pill: 999px;   /* botones */
  --ae-radius-field: 12px;   /* campos */
  --ae-radius-card: 20px;    /* tarjetas e imágenes */
  --ae-border: 1px solid var(--ae-line);
  --ae-control-h: 52px;      /* alto de botones y campos */

  /* Movimiento */
  --ae-ease: cubic-bezier(0.2, 0, 0, 1);
  --ae-fast: 150ms;
  --ae-base: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ae-fast: 0ms;
    --ae-base: 0ms;
  }
}