/* Tokens de Ojo. Escala de espaciado base 8 (con 4 para ajustes finos). */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color: neutros calidos + un solo acento (rojo de cota, como las medidas de las herramientas de diseño) */
  --c-bg: #FAFAF9;
  --c-surface: #FFFFFF;
  --c-sunken: #F1F1EE;
  --c-sunken-2: #E9E9E5;
  --c-line: #E4E4E0;
  --c-line-strong: #CFCFCA;
  --c-ink: #141414;
  --c-ink-2: #4E4E55;   /* 8:1 sobre blanco */
  --c-ink-3: #6E6E76;   /* 5:1 sobre blanco */
  --c-accent: #D9381E;  /* 4,6:1 sobre blanco, texto blanco encima tambien pasa AA */
  --c-accent-soft: rgba(217, 56, 30, 0.16);
  --c-accent-softer: rgba(217, 56, 30, 0.08);

  /* Espaciado */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-9: 64px;

  /* Tipografia */
  --font: 'Inter', system-ui, sans-serif;
  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 14px;  --lh-sm: 20px;
  --fs-md: 16px;  --lh-md: 24px;
  --fs-lg: 20px;  --lh-lg: 28px;
  --fs-xl: 28px;  --lh-xl: 32px;
  --fs-2xl: 40px; --lh-2xl: 44px;
  --fs-num: 72px; --lh-num: 72px;

  /* Forma */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --border: 1px solid var(--c-line);

  /* Layout */
  --w-page: 760px;
  --gutter: 16px;
  --tap: 48px;

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

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