/*
 * ÚNICO archivo para cambiar el diseño visual de toda la app.
 * Cambia un valor aquí y se propaga a cada página, porque components.css (y
 * cada página) solo usan var(--token), nunca colores ni medidas escritas
 * directamente.
 *
 * El color de marca de cada negocio (businesses.brand_color) NO vive aquí:
 * es dato de cada negocio, se aplica en tiempo de ejecución vía JS sobre la
 * tarjeta de vista previa. Estos tokens son solo el diseño propio de la app.
 */
:root {
  /* Color */
  --ink: #211d17;
  --ink-soft: #5c564c;
  --paper: #f6f4ef;
  --paper-raised: #ffffff;
  --line: #dcd7cb;
  --line-strong: #c3bcac;
  --danger: #a33;
  --focus-ring: #7a3b2e;

  /* Tipografía */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 26px;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.08em;

  /* Radios de borde */
  --radius-input: 7px;
  --radius-panel: 10px;
  --radius-card: 12px;
  --radius-round: 50%;

  /* Layout */
  --page-max-width: 900px;
  --page-padding: 32px 20px 80px;
  --card-min-width: 260px;
  --icon-size: 26px;

  /* Espaciado (nombrado por dónde se usa, para calzar exacto con el prototipo) */
  --space-hairline: 4px;
  --space-tight: 6px;
  --space-snug: 8px;
  --space-compact: 11px;
  --space-cozy: 12px;
  --space-comfortable: 14px;
  --space-relaxed: 16px;
  --space-loose: 18px;
  --space-generous: 20px;
  --space-spacious: 24px;
  --space-wide: 28px;
  --space-section: 36px;
}