{
  "$description": "Tokens de Tesela UI. Formato inspirado en W3C Design Tokens (DTCG): $value, $type, $description y alias con {grupo.token}; los valores son cadenas CSS. $extensions['tesela.mode'].light da el valor del modo claro (el $value es el del oscuro). El nombre de la variable CSS es --tsl-<token>: color.bg → --tsl-bg, shadow.lg → --tsl-shadow-lg, radius.default → --tsl-radius.",
  "color": {
    "$type": "color",
    "bg": {
      "$value": "#141415",
      "$description": "Fondo de la página",
      "$extensions": {
        "tesela.mode": {
          "light": "#f8f8f7"
        }
      }
    },
    "bg-elevated": {
      "$value": "#1b1b1d",
      "$description": "Fondo de superficies elevadas: menús, diálogos, popovers",
      "$extensions": {
        "tesela.mode": {
          "light": "#ffffff"
        }
      }
    },
    "bg-glass": {
      "$value": "rgba(20, 20, 21, 0.84)",
      "$description": "Fondo translúcido para cabeceras con desenfoque",
      "$extensions": {
        "tesela.mode": {
          "light": "rgba(248, 248, 247, 0.86)"
        }
      }
    },
    "surface": {
      "$value": "rgba(255, 255, 255, 0.032)",
      "$description": "Relleno sutil de tarjetas y campos",
      "$extensions": {
        "tesela.mode": {
          "light": "rgba(0, 0, 0, 0.024)"
        }
      }
    },
    "surface-hover": {
      "$value": "rgba(255, 255, 255, 0.055)",
      "$description": "Relleno al pasar el cursor",
      "$extensions": {
        "tesela.mode": {
          "light": "rgba(0, 0, 0, 0.045)"
        }
      }
    },
    "surface-strong": {
      "$value": "rgba(255, 255, 255, 0.08)",
      "$description": "Relleno marcado: elemento activo o seleccionado",
      "$extensions": {
        "tesela.mode": {
          "light": "rgba(0, 0, 0, 0.07)"
        }
      }
    },
    "fg": {
      "$value": "#f5f5f7",
      "$description": "Texto principal",
      "$extensions": {
        "tesela.mode": {
          "light": "#141416"
        }
      }
    },
    "fg-muted": {
      "$value": "#8e8e96",
      "$description": "Texto secundario (contraste AA)",
      "$extensions": {
        "tesela.mode": {
          "light": "#63636b"
        }
      }
    },
    "fg-subtle": {
      "$value": "#6a6a74",
      "$description": "Texto terciario: marcadores, deshabilitados (contraste mínimo 3:1)",
      "$extensions": {
        "tesela.mode": {
          "light": "#84848e"
        }
      }
    },
    "border": {
      "$value": "rgba(255, 255, 255, 0.095)",
      "$description": "Borde discreto",
      "$extensions": {
        "tesela.mode": {
          "light": "rgba(0, 0, 0, 0.095)"
        }
      }
    },
    "border-strong": {
      "$value": "rgba(255, 255, 255, 0.22)",
      "$description": "Borde marcado y de campos al pasar el cursor",
      "$extensions": {
        "tesela.mode": {
          "light": "rgba(0, 0, 0, 0.28)"
        }
      }
    },
    "backdrop": {
      "$value": "rgba(8, 8, 9, 0.6)",
      "$description": "Velo detrás de diálogos modales",
      "$extensions": {
        "tesela.mode": {
          "light": "rgba(20, 20, 22, 0.28)"
        }
      }
    },
    "accent": {
      "$value": "#6365f0",
      "$description": "Color de acento: botones, selección, foco (en claro, uno más oscuro para mantener el contraste)",
      "$extensions": {
        "tesela.mode": {
          "light": "#4f46e5"
        }
      }
    },
    "accent-fg": {
      "$value": "#ffffff",
      "$description": "Texto sobre el acento (contraste AA con el acento)"
    },
    "success": {
      "$value": "#10b981",
      "$description": "Éxito (en claro, más oscuro para que el texto cumpla AA)",
      "$extensions": {
        "tesela.mode": {
          "light": "#047253"
        }
      }
    },
    "warning": {
      "$value": "#f59e0b",
      "$description": "Aviso (en claro, más oscuro para que el texto cumpla AA)",
      "$extensions": {
        "tesela.mode": {
          "light": "#a14a08"
        }
      }
    },
    "danger": {
      "$value": "#f54a67",
      "$description": "Peligro o error (en claro, más oscuro para que el texto cumpla AA)",
      "$extensions": {
        "tesela.mode": {
          "light": "#be123c"
        }
      }
    },
    "danger-fg": {
      "$value": "#1a0508",
      "$description": "Texto sobre un relleno de peligro (botón «Eliminar»): oscuro sobre el rojo claro del modo oscuro, blanco sobre el del claro",
      "$extensions": {
        "tesela.mode": {
          "light": "#ffffff"
        }
      }
    },
    "info": {
      "$value": "#0ea5e9",
      "$description": "Información (en claro, más oscuro para que el texto cumpla AA)",
      "$extensions": {
        "tesela.mode": {
          "light": "#0368a0"
        }
      }
    },
    "chart-1": {
      "$value": "{color.accent}",
      "$description": "Serie 1 de las gráficas: sigue al acento"
    },
    "chart-2": {
      "$value": "#10b981",
      "$description": "Serie 2 de las gráficas"
    },
    "chart-3": {
      "$value": "#f59e0b",
      "$description": "Serie 3 de las gráficas"
    },
    "chart-4": {
      "$value": "#f43f5e",
      "$description": "Serie 4 de las gráficas"
    },
    "chart-5": {
      "$value": "#0ea5e9",
      "$description": "Serie 5 de las gráficas"
    },
    "chart-6": {
      "$value": "#a855f7",
      "$description": "Serie 6 de las gráficas"
    },
    "chart-7": {
      "$value": "#14b8a6",
      "$description": "Serie 7 de las gráficas"
    },
    "chart-8": {
      "$value": "#ec4899",
      "$description": "Serie 8 de las gráficas"
    }
  },
  "shadow": {
    "$type": "shadow",
    "default": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px -12px rgba(0, 0, 0, 0.65)",
      "$description": "Sombra de elevación media",
      "$extensions": {
        "tesela.mode": {
          "light": "0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -12px rgba(0, 0, 0, 0.14)"
        }
      }
    },
    "lg": {
      "$value": "0 4px 12px rgba(0, 0, 0, 0.55), 0 20px 38px -12px rgba(0, 0, 0, 0.8)",
      "$description": "Sombra de elevación alta: diálogos, menús",
      "$extensions": {
        "tesela.mode": {
          "light": "0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 34px -12px rgba(0, 0, 0, 0.22)"
        }
      }
    }
  },
  "radius": {
    "$type": "dimension",
    "default": {
      "$value": "9px",
      "$description": "Radio de tarjetas, diálogos y menús"
    },
    "sm": {
      "$value": "7px",
      "$description": "Radio de botones y campos"
    },
    "xs": {
      "$value": "5px",
      "$description": "Radio de elementos pequeños"
    }
  },
  "font": {
    "$type": "fontFamily",
    "mono": {
      "$value": "ui-monospace, \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace",
      "$description": "Tipografía monoespaciada (base de la interfaz)"
    },
    "sans": {
      "$value": "-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif",
      "$description": "Tipografía sans-serif"
    },
    "heading": {
      "$value": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "$description": "Tipografía de títulos"
    }
  },
  "ease": {
    "$type": "cubicBezier",
    "default": {
      "$value": "cubic-bezier(0.22, 1, 0.36, 1)",
      "$description": "Curva de las transiciones"
    }
  },
  "ring": {
    "$type": "shadow",
    "default": {
      "$value": "0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent)",
      "$description": "Anillo de foco visible del teclado"
    }
  }
}