/* tokens.css — variables de DESIGN.md (fuente única de verdad visual) */
:root {
  --bg:      #FAFAF7;
  --panel:   #FFFFFF;
  --border:  #E4E4DE;
  --ink:     #1B1F24;
  --muted:   #5A6470;   /* solo meta >=13px; 4.6:1 sobre --bg */
  --ok:      #1E9E58;
  --ok-soft: rgba(30, 158, 88, .12);
  --danger:  #D14D4D;
  --danger-soft: rgba(209, 77, 77, .10);
  --focus:   #1E9E58;

  --font-ui:   "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --t-display: 28px/1.2 700;
  --t-card:    17px/1.35 600;
  --t-body:    16px/1.45 400;
  --t-meta:    13px/1.4 500;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px;

  --r-card: 12px;
  --r-btn:  8px;
  --r-chip: 999px;
  --r-toast: 10px;
}

/* Selección, caret y focus: themed (nada de defaults del browser) */
::selection { background: rgba(30, 158, 88, .25); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

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