/* mitablero · tokens de diseño (dirección A, "Patio de papel").
   Fuente única: public/shared/. Cada superficie lleva una copia (ver
   server/scripts/sync-design.js) para que cada una funcione sola y offline. */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/Baloo2-var.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("fonts/Nunito-var.woff2") format("woff2"); }

:root {
  /* superficies (Grafito frío medio · Niebla, 2026-10-25) */
  --t-bg: #F7F8F9;
  --t-surface: #FFFFFF;
  --t-surface-2: #EEF1F3;
  --t-line: #E3E6E9;
  --t-line-strong: #CFD4D9;

  /* texto (todos >= 4.5:1 sobre --t-bg y --t-surface) */
  --t-ink: #1A2227;
  --t-ink-2: #38434A;
  --t-muted: #5A646B;

  /* acción: un solo color */
  --t-action: #0E6F68;
  --t-action-d: #0A5751;
  --t-action-soft: #E1EFEE;
  --t-action-tint: #EEF8F6;
  --t-on-action: #FFFFFF;

  /* acento cálido y estados */
  --t-peach: #FDE8D7;
  --t-peach-ink: #7C2D12;
  --t-danger: #B42318;
  --t-danger-soft: #FDECEA;
  --t-warn: #92400E;
  --t-warn-soft: #FEF3C7;
  --t-success: #166534;
  --t-success-soft: #DCFCE7;

  /* tipografía */
  --t-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --t-fs-xs: 12px; --t-fs-sm: 13px; --t-fs-base: 15px; --t-fs-md: 16px;
  --t-fs-lg: 20px; --t-fs-xl: 26px; --t-fs-2xl: 34px;

  /* espaciado (base 4) */
  --t-s1: 4px; --t-s2: 8px; --t-s3: 12px; --t-s4: 16px; --t-s5: 24px; --t-s6: 32px; --t-s7: 48px;

  /* radios */
  --t-r-sm: 8px; --t-r-md: 12px; --t-r-lg: 16px; --t-r-xl: 22px; --t-r-pill: 999px;

  /* sombras suaves, cálidas */
  --t-shadow-1: 0 1px 2px rgba(15, 25, 35, .06);
  --t-shadow-2: 0 4px 14px rgba(15, 25, 35, .08);
  --t-shadow-3: 0 12px 32px rgba(15, 25, 35, .14);

  /* foco y objetivos táctiles (WCAG 2.2 AA) */
  --t-focus: #0B4F4A;
  --t-focus-ring: 0 0 0 3px #F7F8F9, 0 0 0 5px #0B4F4A;
  --t-target: 44px;

  /* controles (componentes compartidos, ver components.css) */
  --t-h-control: 44px;
  --t-h-control-sm: 36px; /* solo barras densas de escritorio; zona táctil sigue en 44 */
  --t-r-ctl: 10px;
  --t-r-modal: 18px;
  --t-fs-ui: 14px;
  --t-overlay: rgba(31, 42, 46, .4);
  --t-toast-action: #7DD3C8; /* acción sobre fondo tinta (>= 4.5:1 sobre --t-ink) */
  --t-dur: 160ms;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--t-focus);
  outline-offset: 2px;
}