/* tokens.css — design tokens compartidos
   Fuente única de verdad para colores, radios y espaciados.
   No agregar estilos de componente aquí (eso vive en components.css). */

:root {
  /* Marca */
  --turquoise: #16BECF;
  --deep-green: #356856;

  /* Estado */
  --red: #F15A62;            /* errores, anular, peligro */
  --yellow: #E8A020;         /* advertencias, alertas */
  --green-success: #2E7D32;  /* éxito, confirmación */

  /* Variedad / categoría */
  --accent-freedom: #E63946;     /* color de marca para Freedom (NO es rojo de error) */
  --otra-finca: #F9A8D4;         /* borde categoría OTRAS FINCAS */
  --otra-finca-text: #9D174D;    /* texto categoría OTRAS FINCAS */
  --otra-finca-bg: #FCE7F3;      /* fondo categoría OTRAS FINCAS */

  /* Superficies */
  --bg: #F5F2EE;
  --surface: #FFFFFF;
  --surface2: #EEF7F8;
  --border: #D4E8E4;

  /* Tipografía */
  --text: #1F1F1F;     /* texto cuerpo (AAA sobre superficies claras) */
  --text2: #2A5746;    /* títulos / acento secundario (AAA sobre blanco, ~7.8:1) */
  --text3: #5C7068;    /* hints, labels, metadata (AA sobre blanco, ~5.7:1) */

  /* Geometría */
  --r: 8px;            /* radius default */
  --r-lg: 12px;        /* radius para cards grandes */
  --r-pill: 20px;      /* pills/chips */

  /* Anchos
     - .app default (operativa): 680 → 900px y se queda. Pantallas de captura
       en piso, form factor real es tablet 10".
     - .app.app--wide (analítica): abre progresivamente hasta 1400px en
       monitor. Dashboards, reportes.
     - .app.app--full (matriz): 100% con padding. Tablas/heatmaps que quieren
       todo el ancho.
     Spec: docs/superpowers/specs/2026-05-14-design-system-anchos-responsive-design.md */
  --max-app: 680px;                 /* operativa móvil */
  --max-app-tablet: 900px;          /* operativa tablet+ */
  --max-app-wide-tablet: 960px;     /* analítica tablet */
  --max-app-wide-laptop: 1200px;    /* analítica laptop */
  --max-app-wide-desktop: 1400px;   /* analítica monitor */

  /* Breakpoints — referenciales (CSS no permite var() en @media).
     Usar exactamente estos umbrales en cada página. */
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;

  /* Tamaños táctiles (mobile-first) */
  --tap-min: 44px;     /* mínimo recomendado */
  --tap-cta: 52px;     /* CTAs principales */
}