{
  "name": "Amelia Hub",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "brand-navy",
        "value": {
          "light": "#052637",
          "dark": "#052637"
        },
        "usage": "Amelia Navy, exacto del logotipo. Color de identidad: fondos de marca (RRSS, portadas, slides de cierre), letras del wordmark. Texto blanco o brand-green encima."
      },
      {
        "name": "brand-green",
        "value": {
          "light": "#00D86F",
          "dark": "#00D86F"
        },
        "usage": "Amelia Green, exacto del logotipo. Rellenos de botones de marca, barras de progreso, gráficos, acentos sobre navy. Texto encima: navy (on-brand-green). No como color de texto sobre blanco (1.9:1)."
      },
      {
        "name": "on-brand-green",
        "value": {
          "light": "#052637",
          "dark": "#052637"
        },
        "usage": "Texto e iconos sobre cualquier relleno brand-green (botones verdes, avatar): navy, 8.3:1. Nunca blanco sobre verde."
      },
      {
        "name": "brand-green-ink",
        "value": {
          "light": "#007A45",
          "dark": "#00D86F"
        },
        "usage": "Verde para TEXTO, enlaces, iconos activos y foco: 5.4:1 sobre card y 5.0:1 sobre subtle en claro; en oscuro usa el verde de marca (7.4:1 sobre card)."
      },
      {
        "name": "brand-green-soft",
        "value": {
          "light": "#E6FBF1",
          "dark": "#0B3D3A"
        },
        "usage": "Fondo suave de chips activos y badges de variación positiva. Texto encima: brand-green-ink. No para filas de tabla (usa row-key)."
      },
      {
        "name": "brand-deep",
        "value": {
          "light": "#052637",
          "dark": "#1B5A78"
        },
        "usage": "Bloque navy que debe verse en ambos temas (portada, banners). En oscuro sube de luminosidad para no fundirse con background."
      },
      {
        "name": "background",
        "value": {
          "light": "#F8F9FA",
          "dark": "#04202F"
        },
        "usage": "Lienzo de la página / app. Las tarjetas blancas se apoyan encima."
      },
      {
        "name": "card",
        "value": {
          "light": "#FFFFFF",
          "dark": "#0A2F42"
        },
        "usage": "Tarjetas, paneles, modales, popovers."
      },
      {
        "name": "subtle",
        "value": {
          "light": "#F1F5F9",
          "dark": "#0F3A4F"
        },
        "usage": "Hover de filas, cabecera de tabla, inputs en reposo, chips neutros, fondo de pastillas de logos de terceros."
      },
      {
        "name": "row-key",
        "value": {
          "light": "#F4F6F8",
          "dark": "#0D3548"
        },
        "usage": "Fondo de filas clave de tabla (totales, EBITDA, margen): gris apenas más oscuro que card, texto en 600. Nunca verde."
      },
      {
        "name": "border",
        "value": {
          "light": "#E2E8F0",
          "dark": "#1C4255"
        },
        "usage": "Divisores y borde de 1px de tarjetas (decorativo, no transmite información)."
      },
      {
        "name": "border-strong",
        "value": {
          "light": "#7F8EA3",
          "dark": "#5E7B8E"
        },
        "usage": "Borde de controles (inputs, checkboxes, botón outline): ≥3:1 sobre card y background en ambos temas."
      },
      {
        "name": "foreground",
        "value": {
          "light": "#052637",
          "dark": "#F1F5F9"
        },
        "usage": "Texto principal y cifras. Navy de marca en claro (15.7:1 sobre card)."
      },
      {
        "name": "muted-foreground",
        "value": {
          "light": "#5B6B80",
          "dark": "#94A3B8"
        },
        "usage": "Texto secundario, unidades, timestamps, cabeceras de columna. ≥4.5:1 sobre card, background y subtle en ambos temas."
      },
      {
        "name": "primary",
        "value": {
          "light": "#052637",
          "dark": "#00D86F"
        },
        "usage": "Botón primario y filtro activo. Navy con texto blanco en claro; verde con texto navy en oscuro."
      },
      {
        "name": "on-primary",
        "value": {
          "light": "#FFFFFF",
          "dark": "#052637"
        },
        "usage": "Texto e iconos sobre primary: blanco sobre navy en claro (15.7:1), navy sobre verde en oscuro (8.3:1)."
      },
      {
        "name": "focus-ring",
        "value": {
          "light": "{brand-green-ink}",
          "dark": "{brand-green-ink}"
        },
        "usage": "Anillo de foco de teclado: 2px sólido con 2px de separación. Nunca naranja."
      },
      {
        "name": "destructive",
        "value": {
          "light": "#DC2626",
          "dark": "#F87171"
        },
        "usage": "Errores, acciones destructivas, estados críticos. Texto sobre card/background ≥4.5:1."
      },
      {
        "name": "on-destructive",
        "value": {
          "light": "#FFFFFF",
          "dark": "#052637"
        },
        "usage": "Texto sobre un relleno destructive."
      },
      {
        "name": "warning",
        "value": {
          "light": "#B45309",
          "dark": "#FBBF24"
        },
        "usage": "Texto/icono de advertencia. Solo para avisos: nunca en botones, foco ni tags activos."
      },
      {
        "name": "info",
        "value": {
          "light": "#2563EB",
          "dark": "#60A5FA"
        },
        "usage": "Indicadores informativos, enlaces dentro de datos, puntos marcados en el mapa."
      },
      {
        "name": "success",
        "value": {
          "light": "#15803D",
          "dark": "#34D399"
        },
        "usage": "Texto de éxito / variación positiva (5.0:1 sobre card)."
      },
      {
        "name": "status-validated",
        "value": {
          "light": "#1F8A4C",
          "dark": "#34D399"
        },
        "usage": "Inspección Validated: punto, icono y relleno en mapa y tablas. Como texto usa success (4.4:1 en claro, solo para iconos/rellenos)."
      },
      {
        "name": "status-action",
        "value": {
          "light": "#F97316",
          "dark": "#FB923C"
        },
        "usage": "Inspección Action Required: punto o relleno. Único uso permitido del naranja."
      },
      {
        "name": "status-review",
        "value": {
          "light": "#3B82F6",
          "dark": "#60A5FA"
        },
        "usage": "Inspección To Be Reviewed / hinca Marked."
      },
      {
        "name": "status-remark",
        "value": {
          "light": "#94A3B8",
          "dark": "#94A3B8"
        },
        "usage": "Inspección Remark Required. Ojo: 2.6:1 sobre card claro; acompáñalo siempre de etiqueta de texto."
      },
      {
        "name": "status-unmarked",
        "value": {
          "light": "#CBD2DA",
          "dark": "#4B6576"
        },
        "usage": "Hinca Unmarked: punto neutro en mapa. Siempre con leyenda."
      },
      {
        "name": "chart-1",
        "value": {
          "light": "#052637",
          "dark": "#E2E8F0"
        },
        "usage": "Serie principal de gráficos (navy en claro, casi blanco en oscuro)."
      },
      {
        "name": "chart-2",
        "value": {
          "light": "#00D86F",
          "dark": "#00D86F"
        },
        "usage": "Serie destacada: verde de marca. Ojo: 1.9:1 sobre blanco; junto a chart-1 (navy) se distingue, pero etiqueta siempre la serie (leyenda o valor directo)."
      },
      {
        "name": "chart-3",
        "value": {
          "light": "#5B8DB8",
          "dark": "#7FB0DB"
        },
        "usage": "Tercera serie (azul acero)."
      },
      {
        "name": "chart-4",
        "value": {
          "light": "#A7B6C8",
          "dark": "#5E7B8E"
        },
        "usage": "Serie de referencia / 'resto' / objetivo. 2.1:1 sobre blanco: úsala como relleno de apoyo, nunca como única serie."
      },
      {
        "name": "chart-5",
        "value": {
          "light": "#0E7C86",
          "dark": "#2BB3BE"
        },
        "usage": "Quinta serie (teal). Más de 5 series: agrupa en 'Otros'."
      },
      {
        "name": "overlay",
        "value": {
          "light": "rgba(5, 38, 55, 0.48)",
          "dark": "rgba(0, 0, 0, 0.6)"
        },
        "usage": "Velo detrás de modales y sheets laterales."
      },
      {
        "name": "sidebar-bg",
        "value": {
          "light": "#052637",
          "dark": "#021823"
        },
        "usage": "Fondo de la barra lateral de TODAS las plataformas: navy de marca en claro; en oscuro un navy más profundo que el lienzo para que se lea como marco."
      },
      {
        "name": "sidebar-fg",
        "value": {
          "light": "#A3B3C6",
          "dark": "#A3B3C6"
        },
        "usage": "Texto e iconos de items inactivos de la sidebar (7.3:1 sobre sidebar-bg)."
      },
      {
        "name": "sidebar-fg-strong",
        "value": {
          "light": "#FFFFFF",
          "dark": "#FFFFFF"
        },
        "usage": "Texto en hover, nombre de usuario y título del selector de contexto en la sidebar."
      },
      {
        "name": "sidebar-accent",
        "value": {
          "light": "#00D86F",
          "dark": "#00D86F"
        },
        "usage": "Texto e icono del item activo, barra de progreso y etiqueta de plataforma (6.6:1 sobre sidebar-active)."
      },
      {
        "name": "sidebar-hover",
        "value": {
          "light": "rgba(255, 255, 255, 0.05)",
          "dark": "rgba(255, 255, 255, 0.05)"
        },
        "usage": "Fondo de item en hover."
      },
      {
        "name": "sidebar-active",
        "value": {
          "light": "rgba(255, 255, 255, 0.08)",
          "dark": "rgba(255, 255, 255, 0.08)"
        },
        "usage": "Fondo del item activo."
      },
      {
        "name": "sidebar-border",
        "value": {
          "light": "rgba(255, 255, 255, 0.10)",
          "dark": "rgba(255, 255, 255, 0.10)"
        },
        "usage": "Divisores internos de la sidebar, borde del selector de contexto y de la etiqueta; borde derecho en oscuro."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "sans": "Manrope, system-ui, -apple-system, \"Segoe UI\", sans-serif",
      "serif": "Newsreader, Georgia, \"Times New Roman\", serif",
      "mono": "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace"
    },
    "groups": [
      {
        "name": "Display y titulares",
        "family": "sans",
        "styles": [
          {
            "name": "display",
            "fontSize": "36px",
            "lineHeight": "40px",
            "fontWeight": 700,
            "letterSpacing": "-0.03em",
            "sample": "1 GW certificado",
            "usage": "Hero de web, portada de deck, cifra de titular."
          },
          {
            "name": "h1",
            "fontSize": "24px",
            "lineHeight": "30px",
            "fontWeight": 700,
            "letterSpacing": "-0.025em",
            "sample": "Calidad de hincado, certificada",
            "usage": "Título de página o de slide."
          },
          {
            "name": "page-title",
            "fontSize": "20px",
            "lineHeight": "28px",
            "fontWeight": 700,
            "letterSpacing": "-0.02em",
            "sample": "Parque Los Llanos",
            "usage": "Título de página dentro de una app (PageHeader)."
          },
          {
            "name": "h2",
            "fontSize": "18px",
            "lineHeight": "26px",
            "fontWeight": 600,
            "letterSpacing": "-0.02em",
            "sample": "Resumen del parque",
            "usage": "Título de sección, TopBar de app."
          },
          {
            "name": "h3",
            "fontSize": "16px",
            "lineHeight": "24px",
            "fontWeight": 600,
            "sample": "Hincas validadas",
            "usage": "Título de tarjeta."
          }
        ]
      },
      {
        "name": "Texto",
        "family": "sans",
        "styles": [
          {
            "name": "body",
            "fontSize": "14px",
            "lineHeight": "22px",
            "fontWeight": 400,
            "sample": "El Hincator mide cada hinca con GNSS y genera el certificado automáticamente.",
            "usage": "Párrafos, celdas de tabla, inputs."
          },
          {
            "name": "body-lg",
            "fontSize": "16px",
            "lineHeight": "26px",
            "fontWeight": 400,
            "sample": "Menos retrabajo, más MW conectados a tiempo.",
            "usage": "Texto de web, documentos y emails."
          },
          {
            "name": "label",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 500,
            "sample": "Última medición · hace 2 h",
            "usage": "Badges, filtros, leyendas, metadatos."
          },
          {
            "name": "overline",
            "fontSize": "11px",
            "lineHeight": "16px",
            "fontWeight": 600,
            "letterSpacing": "0.08em",
            "sample": "PROYECTOS ACTIVOS",
            "usage": "Cabeceras de sección y de columna, en MAYÚSCULAS y muted-foreground."
          }
        ]
      },
      {
        "name": "Datos",
        "family": "sans",
        "styles": [
          {
            "name": "kpi",
            "fontSize": "32px",
            "lineHeight": "36px",
            "fontWeight": 700,
            "letterSpacing": "-0.03em",
            "sample": "12.480",
            "usage": "Cifra de KPI. Siempre con font-variant-numeric: tabular-nums."
          },
          {
            "name": "data-mono",
            "family": "mono",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 500,
            "sample": "T-0142 · 2026-11-11",
            "usage": "IDs de hinca/tracker, fechas técnicas, códigos."
          }
        ]
      },
      {
        "name": "Editorial",
        "family": "serif",
        "styles": [
          {
            "name": "quote",
            "fontSize": "26px",
            "lineHeight": "34px",
            "fontWeight": 500,
            "fontStyle": "italic",
            "sample": "Cada hinca, medida. Cada parque, certificado.",
            "usage": "Frases destacadas, citas, bienvenida. Máx. una por pieza."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Separación icono–texto mínima, padding de micro-badges."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Gap de chips y botones en fila; padding de celdas compactas."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Padding horizontal de botones e inputs."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Padding de celdas cómodas y gaps de grid."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Padding interno de tarjetas."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Margen lateral de página en app; separación entre bloques."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Separación entre secciones de documento o slide."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Separación entre secciones de web."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "8px",
        "usage": "Controles: botones, inputs, dropdowns, tabs, badges, chips e items de menú."
      },
      {
        "name": "radius-lg",
        "value": "14px",
        "usage": "Contenedores: tarjetas, paneles, tablas, popovers y modales."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-card",
        "value": "0 1px 3px rgba(5, 38, 55, 0.04), 0 0 0 1px rgba(5, 38, 55, 0.02)",
        "usage": "Tarjeta en reposo: casi plana, la definición la da el borde."
      },
      {
        "name": "shadow-hover",
        "value": "0 1px 3px rgba(5, 38, 55, 0.06)",
        "usage": "Hover casi sin sombra: apenas 1px de elevación. En hover prioriza cambiar el borde o el fondo (subtle), nunca sombras grandes."
      },
      {
        "name": "shadow-panel",
        "value": "0 1px 2px rgba(5, 38, 55, 0.05), 0 8px 30px -12px rgba(5, 38, 55, 0.16)",
        "usage": "Paneles laterales, popovers, modales."
      }
    ]
  },
  "zIndex": {
    "note": "Capas. En la app con mapa Leaflet se respetan estos valores exactos.",
    "tokens": [
      {
        "name": "z-topbar",
        "value": "30",
        "usage": "TopBar sticky."
      },
      {
        "name": "z-map-controls",
        "value": "400",
        "usage": "Controles flotantes sobre el mapa."
      },
      {
        "name": "z-sheet",
        "value": "1001",
        "usage": "Paneles laterales (detalle de hinca/tracker)."
      },
      {
        "name": "z-modal",
        "value": "2000",
        "usage": "Overlay y contenido de modales (2000/2001)."
      },
      {
        "name": "z-popover",
        "value": "9999",
        "usage": "Tooltips, popovers, toasts y alertas globales."
      }
    ]
  },
  "layout": {
    "note": "Medidas fijas del app shell.",
    "tokens": [
      {
        "name": "sidebar-width",
        "value": "248px",
        "usage": "Sidebar expandida."
      },
      {
        "name": "sidebar-width-collapsed",
        "value": "64px",
        "usage": "Sidebar plegada (solo iconos)."
      },
      {
        "name": "topbar-height",
        "value": "56px",
        "usage": "Altura de TopBar y de la cabecera de marca de la sidebar."
      },
      {
        "name": "content-max-width",
        "value": "1440px",
        "usage": "Ancho máximo del contenido de página."
      },
      {
        "name": "form-max-width",
        "value": "380px",
        "usage": "Ancho del formulario de login/signup."
      }
    ]
  }
}