/* Variables globales: colores, tipografía, espaciado, transiciones. */
:root {
  /* Colores base */
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-hover: #f5f5f5;
  --text: #111111;
  --text-muted: #999999;
  --text-soft: #666666;
  --border: #eeeeee;
  --border-strong: #d9d9d9;

  /* Acentos */
  --accent: #000000;
  --accent-inv: #ffffff;

  /* Estados */
  --state-draft-bg: #f0f0f0;
  --state-draft-fg: #555555;
  --state-complete-bg: #e8f7eb;
  --state-complete-fg: #1f8a3a;
  --state-incomplete-bg: #fff2e0;
  --state-incomplete-fg: #b56500;
  --state-shared-bg: #e7f3ff;
  --state-shared-fg: #0958a8;

  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --yellow: #ffcc00;

  /* Tipografía — Source Sans 3 (humanista, legible en texto largo) + Lora
     (serif de títulos). Elegidas por Alejandro el 2026-07-29; antes Outfit +
     Fraunces. Se cargan en index.html (Google Fonts). */
  --font-ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  /* Tamaños tipográficos */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  /* Espaciado */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-10: 56px;

  /* Radios */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* Transiciones */
  --t-fast: 120ms ease;
  --t: 150ms ease;
  --t-slow: 240ms ease;

  /* Layout */
  --header-h: 56px;
  --container-max: 1280px;
}