/* crescō · tokens · v1.1 · mayo 2026
 * fuente única de verdad. si un valor en main.css o slides.css
 * no viene de un token de acá, se considera deuda. */

:root {
  /* color · superficies */
  --bg: #EFEAE0;
  --paper: #F7F3EA;

  /* color · tinta */
  --ink: #1A1612;
  --ink-soft: #5C544A;
  --muted: #8C8377;

  /* color · líneas */
  --line: #D4CCBC;
  --line-soft: #E2DBCC;

  /* color · acento (moss) — máx 12% de superficie */
  --accent: #3D5240;
  --accent-soft: #DAE2D9;
  --accent-deep: #2A3B2D;

  /* color · estado · derivados de la paleta, sin azules ni rojos chillones */
  --state-success: #3D5240;
  --state-warning: #9E6B23;
  --state-danger: #8C2E2E;
  --state-info: #4A5C6B;

  /* tipografía · una sola voz visible (Inter), Mono para metadata */
  --serif: 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* peso */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* type scale · 14px base, ratio editorial */
  --text-2xs: 9.5px;
  --text-xs: 10.5px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-display: clamp(48px, 5.4vw, 76px);

  /* line-height */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.55;

  /* letter-spacing */
  --tracking-tightest: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-snug: -0.015em;
  --tracking-base: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.08em;

  /* spacing scale · base 4px */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* border-width · NUNCA pasar de 1pt salvo demos */
  --bw: 0.5pt;
  --bw-thick: 1pt;

  /* radius */
  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 99px;

  /* opacidad · escala fija para evitar ruido */
  --o-faint: 0.4;
  --o-soft: 0.55;
  --o-mid: 0.7;
  --o-strong: 0.85;

  /* motion · timings */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.6, 0);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* anchos de contenedor */
  --max-w-prose: 640px;
  --max-w-content: 1080px;
  --max-w-frame: 1280px;

  /* z-index · escala discreta */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  /* breakpoints · referencia (CSS no usa custom-media nativo) */
  --bp-sm: 640px;
  --bp-md: 880px;
  --bp-lg: 1080px;
  --bp-xl: 1280px;

  /* focus ring · nunca outline:none sin reemplazo */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--accent);
  --focus-ring-offset: 2px;
}

/* a11y · respeta preferencia del usuario · sin sombras igual */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* a11y · focus visible global · usa el accent + offset bg */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--r-sm);
}