/* Kilde — design tokens (estilo Módulos). Fuente de verdad: .agents/brand.md */

@font-face { font-family: "Jost"; src: url("../assets/fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../assets/fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../assets/fonts/jost-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Color */
  --color-bg: #F6F4EF;         /* hueso */
  --color-surface: #FFFFFF;    /* tarjetas */
  --color-ink: #1C2541;        /* índigo: texto y logo */
  --color-ink-soft: #646A7A;   /* texto secundario (antes #6C7282: 4,38:1 sobre hueso → ahora 4,92:1, AA) */
  --color-line: #E4E0D6;       /* bordes decorativos (no sirve para campos: 1,32:1) */
  --color-field-border: var(--color-ink-soft);  /* bordes de campos de formulario (4,81:1 sobre blanco) */
  --color-cta: #FF5A3C;        /* tomate: SOLO botones de acción */
  --color-on-cta: #1C2541;     /* índigo sobre tomate = 4,88:1 (el blanco da 3,10:1 y no pasa AA) */
  --color-accent: #4EA8DE;     /* cielo: líneas, detalles, estado "hecho". Nunca en texto (2,39:1) */
  --color-dark-bg: #1C2541;    /* secciones oscuras */
  --color-dark-ink: #F6F4EF;
  --color-dark-ink-soft: #BEC4D4;
  /* Sin --color-cta-hover: al pasar el ratón el botón sube 2px y no cambia de color,
     porque con el tono oscuro ni el blanco ni el índigo llegan a AA (3,9:1). */

  /* Tipografía (Jost 400/500/600, escala ~1,25) */
  --font: "Jost", system-ui, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fs-hero: clamp(2.5rem, 1.5rem + 4.6vw, 5rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17–19 px */
  --fs-small: 0.9375rem;                                  /* 15 px, etiquetas en 500 */
  --lh-tight: 1.06; --lh-heading: 1.1; --lh-lead: 1.45; --lh-body: 1.5;
  --measure: 34rem;                                       /* ~65 caracteres por línea */

  /* Espacio (escala 4/8) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem;
  --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 7rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --container: 75rem;
  --gutter: clamp(1rem, 4vw, 6rem);
  --header-h: 4.5rem;

  /* Formas */
  --radius-piece: 28%;          /* piezas del símbolo */
  --radius-card: 20px;
  --radius-button: 14px;        /* 28 % de 50 px de alto: el botón es una pieza estirada */
  --piece-s: 0.75rem;           /* viñetas */
  --piece-m: 2.25rem;           /* marcadores */
  --border: 1px solid var(--color-line);
  --focus-ring: 2px solid var(--color-ink);
  --shadow-cta-hover: 0 1px 2px rgb(28 37 65 / 0.10), 0 4px 10px rgb(28 37 65 / 0.08), 0 12px 24px rgb(28 37 65 / 0.06);
  --shadow-soft: 0 1px 2px rgb(28 37 65 / 0.05), 0 8px 20px rgb(28 37 65 / 0.06), 0 24px 48px rgb(28 37 65 / 0.06);  /* objetos de ejemplo (chat) */

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);   /* encaje con pequeño rebote */
  --dur-press: 90ms; --dur-fast: 180ms; --dur-base: 380ms; --dur-slow: 600ms;
  --stagger: 70ms;
}

/* 0.01ms y no 0ms: así siguen disparándose transitionend/animationend */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0.01ms; --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --stagger: 0ms; }
}