/* Rodmann Labs / Amplia / Lía — sistema visual V7.1 (tokens de DESIGN.md) */

:root {
  /* color */
  --ink: #101613;
  --paper: #F4F3EB;
  --lime: #EAFE69;
  --clay: #F5B69C;
  --muted: #5C6861;
  --user-bubble: #FFFFFF;
  --chat-surface: #E9ECE2;
  --line: #D9DDD4;
  --ink-2: #1C2620;
  --ink-line: #344139;
  --muted-on-ink: #A7B2AA;
  --lime-body-text: #354035;
  --focus-ring: #65755E;
  /* tipografía */
  --font-brand: Manrope, sans-serif;
  --font-mono: "DM Mono", monospace;
  /* espaciado (grid de 8, microajuste de 4) */
  --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px;
  --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px; --s-4xl: 80px;
  /* radios: escala cerrada */
  --r-sm: 14px; --r-card: 20px; --r-stage: 36px; --r-pill: 999px;
  /* movimiento */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overscroll-behavior-x: none; } /* sin paneo lateral en móvil */
body { margin: 0; font-family: var(--font-brand); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--lime); color: var(--ink); }

/* foco: 3 px focus-ring (hueso sobre grafito, grafito sobre arcilla) */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; }
.on-ink a:focus-visible, .on-ink button:focus-visible { outline-color: var(--paper); outline-offset: 8px; }

/* etiqueta técnica */
.label { font: 400 12px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* botones: píldora, 48–54 px */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm);
  min-height: 54px; padding: 15px var(--s-lg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 700 14px/1.2 var(--font-brand); text-decoration: none; cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { background: var(--lime); color: var(--ink); }
.button-dark { background: var(--ink); color: var(--paper); min-height: 52px; }
.button-dark:hover { background: var(--ink-line); }
.button-dark:active { background: var(--ink-2); }
.button-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.button-ghost:hover, .button-ghost:active { background: #E6E8DF; }
.button-ghost:active { border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .button:hover, .button:active { transform: none; }
}